采用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. Shell特殊变量

    $ 表示当前Shell进程的ID,即pid $echo $$ 运行结果 特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例如,第一个参数 ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. MIP开发常见问题解答

    校验相关 1. MIP 页面的 <a>链接校验报错,MIP 是强制 target="_blank" 吗? 如果想直接跳转MIP页,可以用mip-link 组件:MIP ...

  4. 如何一步一步用DDD设计一个电商网站（二）—— 项目架构

    阅读目录 前言 六边形架构 终于开始建项目了 DDD中的3个臭皮匠 CQRS(Command Query Responsibility Segregation) 结语 一.前言 上一篇我们讲了DDD的 ...

  5. 来吧，HTML5之基础标签(上)

    什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签  定义超链接, ...

  6. 【NLP】揭秘马尔可夫模型神秘面纱系列文章（一）

    初识马尔可夫和马尔可夫链 作者:白宁超 2016年7月10日20:34:20 摘要:最早接触马尔可夫模型的定义源于吴军先生<数学之美>一书,起初觉得深奥难懂且无什么用场.直到学习自然语言处 ...

  7. 【HanLP】资料链接汇总

    Java中调用HanLP配置 HanLP自然语言处理包开源官方文档 了解HanLP的全部 自然语言处理HanLP 开源自由的汉语言处理包主页 GitHub源码 基于hanLP的中文分词详解-MapRe ...

  8. Web安全相关（五）：SQL注入(SQL Injection)

    简介 SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组合,通过执行SQL语句进而执行攻击者所要的操作,其主要原因是程序没有细致地过滤用户输入的数据 ...

  9. 深入理解 JavaScript，以及 Linux 下的开发调试工具

    前言 JavaScript 是我接触到的第二门编程语言,第一门是 C 语言.然后才是 C++.Java 还有其它一些什么.所以我对 JavaScript 是非常有感情的,毕竟使用它有十多年了.早就想写 ...

  10. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...