采用bootstrap框架样式

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="../../theme/pc_global.js"></script>

    <script src="../../theme/js/layer/layer.js" type="text/javascript"></script>

    <style>

        .container .form-group { margin-top: 5px; }

    </style>

</head>

<body>

    <form id="form1" runat="server" enctype="multipart/form-data">

        <%-- class="form-inline"--%>

        <div class="container">

            <div class="form-group">

                <label class="control-label">第一步：下载Excel模板到本地；</label>

                <button type="button" class="btn btn-default" onclick="DownModule()">下载模板</button>

            </div>

            <div class="form-group">

                <label class="control-label">第二步：按照Excel模板中格式要求编辑学生分数；</label>

            </div>

            <div class="form-group">

                <label class="control-label" style="float: left;">第三步：从本地选择已保存的Excel文件；</label>

                <input type="file" style="float: left; display: none;" id="inputfile" runat="server" />

                <div class="input-group" style="float: left; width: 40%; margin-top: -5px;">

                    <span class="input-group-btn">

                        <button type="button" class="btn btn-default" onclick="$('#inputfile').click();">选择文件</button>

                    </span>

                    <input id="txt_inputfile" type="text" class="form-control" readonly="true" />

                </div>

            </div>

            <div style="clear: left; margin-bottom: 15px;"></div>

            <div class="form-group">

                <label class="control-label" style="float: left;">第四步：点击导入上传文件到系统。</label>

                <button type="button" style="float: left; margin-top: -5px;" class="btn btn-default" runat="server" onserverclick="btn_Click" onclick="CheckFile();">导入</button>

                <label id="lbl_error" style="float: left;" class="control-label text-danger" runat="server"></label>

            </div>

            <div style="clear: left;"></div>

            <div id="div_error" class="table-responsive" style="display: none;" runat="server">

                <table class="table table-hover table-bordered">

                    <caption>以下数据导入失败</caption>

                    <thead>

                        <tr>

                            <th>学号</th>

                            <th>姓名</th>

                            <th>分数</th>

                            <th>错误原因</th>

                        </tr>

                    </thead>

                    <tbody id="tbody_trs" runat="server">

                    </tbody>

                </table>

            </div>

        </div>

        <asp:HiddenField ID="HFTClassID" runat="server" />

        <asp:HiddenField ID="HidCustomScoreID" runat="server" />

    </form>

    <script type="text/javascript">

        var FrameIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引

        //关闭页面

        function ClosePage() {

            parent.layer.close(FrameIndex);

        }

    </script>

    <script type="text/javascript">

        //导入

        function ExportScoreCustom() {

            var tclassid = $("#HFTClassID").val();

            var customscoreid = $("#HidCustomScoreID").val();

            $.ajax({

                //提交数据的类型 POST GET

                type: "POST",

                //提交的网址

                url: "../ScoreAction.ashx",

                //提交的数据

                data: { "action": "exportscorecustom", "tclassid": tclassid, "customscoreid": customscoreid },

                //返回数据的格式

                datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".

                //在请求之前调用的函数

                beforeSend: function () { },

                //成功返回之后调用的函数

                success: function (datajson) {

                    if (datajson != null && typeof (datajson) == "string" && datajson.length > 0) { try { datajson = JSON.parse(datajson); } catch (e) { datajson = eval("(" + datajson + ")"); } }

                    window.parent.LoadList();

                    if (datajson.msg < 0) {//导入临时表失败

                        layer.msg(datajson.msgbox);

                        $("#div_label label").text(datajson.msgbox);

                        $("#div_error").hide();

                    } else {

                        $("#div_label label").text("");

                        $("#div_error").show();

                        $("#div_error table tbody").empty();

                        $(datajson.jsonstr).each(function (index, Row) {

                            $("#div_error table tbody").append(MyTrHtml(Row));

                        });

                    }

                },

                //调用执行后调用的函数

                complete: function (XMLHttpRequest, textStatus) { },

                //调用出错执行的函数

                error: function () { }

            });

        }

        function MyTrHtml(Row) {

            var errormsg = $("#div_tr_model").html();

            errormsg = errormsg.replace(/{IDNO}/g, Row.IDNO)

                .replace(/{UserName}/g, Row.UserName)

                .replace(/{Score}/g, Row.Score)

                .replace(/{ErrorReason}/g, Row.ErrorReason);

            return errormsg;

        }

        //下载模板

        function DownModule() {

            parent.window.open("http://" + window.location.host + "/_Score/自定义成绩模板.xls");

        }

        //点击导入

        function CheckFile() {

            if ($("#inputfile").val() == "") {

                $("#txt_inputfile").val("未选择任何文件");

                return false;

            } else {

                return true;

            }

        }

        //上传文件-确定

        $('#inputfile').change(function () {

            var str = $(this).val();

            var arr = str.split('\\');//注split可以用字符或字符串分割

            var my = arr[arr.length - 1];//这就是要取得的图片名称

            $("#txt_inputfile").val(my);

        })

    </script>

</body>

</html>

input type='file'上传控件假样式的更多相关文章

  1. input type=file上传控件老问题

    // 1.用INPUT控制上传文件时,点击INPUT控件出现文件选择框. // 2.如果在手机上使用时,一般不会出现这种较丑的 // 3.于是就自然想到将控件隐藏,然后用一个按钮代替,点击按钮时在函数 ...

  2. input type=file 上传文件样式美化（转载）

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  3. Js获取file上传控件的文件路径总结

    总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...

  4. <input type=file>上传唯一控件

    值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行.但是还有一点,浏览器 ...

  5. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  6. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  7. input(type='file')上传多张照片并显示，传到后台

    以下内容为网络摘抄和实践修改所得,如有雷同,请谅解!!!! 1.首先是前端页面代码: 其中,<input type="file" id="file_input&qu ...

  8. 判断input[type=file]上传文件格式

    input type="file" 在js中判断文件上传类型 function onSubmit(){ var form1 = document.forms[0]; var fil ...

  9. input标签type="file"上传文件的css样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 从0开始搭建SQL Server AlwaysOn 第一篇（配置域控）

    从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...

  2. 探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密

    下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...

  3. Android 几种消息推送方案总结

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6241354.html 首先看一张国内Top500 Android应用中它们用到的第三方推送以及所占数量: 现 ...

  4. scp报错 -bash: scp: command not found

    环境:RHEL6.5 使用scp命令报错: [root@oradb23 media]# scp /etc/hosts oradb24:/etc/ -bash: scp: command not fou ...

  5. .Net语言 APP开发平台——Smobiler学习日志：如何快速在手机上实现ContextMenu

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的&qu ...

  6. const let,console.log('a',a)跟console.log('a'+a)的区别

    const 创建一个只读的常量 let块级作用域 const let重复赋值都会报错 console.log('a',a) a console.log('a'+a) a2 逗号的值会有空格:用加号的值 ...

  7. mono for android 读取网络远程图片

    布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=& ...

  8. WPF - 属性系统 （3 of 4）

    依赖项属性元数据 在前面的章节中,我们已经介绍了WPF依赖项属性元数据中的两个组成:CoerceValueCallback回调以及PropertyChangedCallback.而在本节中,我们将对其 ...

  9. 《深入理解Java虚拟机》类文件结构

    上节学习回顾 在上一节当中,主要以自己的工作环境简单地介绍了一下自身的一些调优或者说是故障处理经验.所谓百变不离其宗,这个宗就是我们解决问题的思路了. 本节学习重点 在前面几章,我们宏观地了解了虚拟机 ...

  10. 安全防范：nginx下git引发的隐私泄露问题

    安全防范:nginx下git引发的隐私泄露问题 1   安全事件 最近阿里云服务器后台管理系统中收到一条安全提示消息,系统配置信息泄露: http://my.domain.com/.git/confi ...