采用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. CYQ.Data、ASP.NET Aries 百家企业使用名单

    如果您或您所在的公司正在使用此框架,请联系左侧的扣扣,告知我信息,我将为您添加链接: 以下内容为已反馈的用户,(收集始于:2016-08-08),仅展示99家: 序号 企业名称 企业网址 备注 1 山 ...

  2. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  3. UML课程复习重点

    第一章 一.UML图示建模工具 二.UML--统一建模语言,以图形符号为基础,描述软件模型既简洁又清晰.它不是开发方法,是独立于任何开发方法之外的语言.它用于描述软件系统分析.设计和实施中的各种模型. ...

  4. 【原】AFNetworking源码阅读（五）

    [原]AFNetworking源码阅读(五) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇中提及到了Multipart Request的构建方法- [AFHTTP ...

  5. 基于netty http协议栈的轻量级流程控制组件的实现

    今儿个是冬至,所谓“冬大过年”,公司也应景五点钟就放大伙儿回家吃饺子喝羊肉汤了,而我本着极高的职业素养依然坚持留在公司(实则因为没饺子吃没羊肉汤喝,只能呆公司吃食堂……).趁着这一个多小时的时间,想跟 ...

  6. 使用SwingBench 对Oracle RAC DB性能 压力测试

    我们可以使用swingbench这个工具对数据库性能进行压力测试,得到一些性能指标作为参考. SwingBench下载: http://www.dominicgiles.com/downloads.h ...

  7. Javascript正则对象方法与字符串正则方法总结

    正则对象 var reg = new Regexp('abc','gi') var reg = /abc/ig 正则方法 test方法(测试某个字符串是否匹配) var str = 'abc123'; ...

  8. DOM、BOM 操作超级集合

    本章内容: 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位 ...

  9. JavaWeb——ServletContext

    一.基本概念 说起ServletContext,一些人会产生误解,以为一个servlet对应一个ServletContext.其实不是这样的,事实是一个web应用对应一个ServletContext, ...

  10. [原创]关于Hibernate中的级联操作以及懒加载

    Hibernate: 级联操作 一.简单的介绍 cascade和inverse (Employee – Department) Casade用来说明当对主对象进行某种操作时是否对其关联的从对象也作类似 ...