采用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. expect用法

    1. ［#!/usr/bin/expect］  这一行告诉操作系统脚本里的代码使用那一个shell来执行.这里的expect其实和linux下的bash.windows下的cmd是一类东西.  注意: ...

  2. “.Net 社区虚拟大会”(dotnetConf) 2016 Day 3 Keynote: Scott Hanselman

    美国时间 6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开,美国时间6.9 是第三天, Scott Hanselman 做Keynote.今天主题围绕的是.NET ...

  3. nodejs创建http服务器

    之前有简单介绍nodejs的一篇文章(http://www.cnblogs.com/fangsmile/p/6226044.html) HTTP服务器 Node内建有一个模块,利用它可以很容易创建基本 ...

  4. js获取给定月份的N个月后的日期

    1.在讲js获取给定月份的N个月后的日期之前,小颖先给大家讲下getFullYear().getYear()的区别. ①getYear() var d = new Date() console.log ...

  5. 11、Struts2 的文件上传和下载

    文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...

  6. 用scikit-learn学习BIRCH聚类

    在BIRCH聚类算法原理中,我们对BIRCH聚类算法的原理做了总结,本文就对scikit-learn中BIRCH算法的使用做一个总结. 1. scikit-learn之BIRCH类 在scikit-l ...

  7. 接口--interface

    “interface”(接口)关键字使抽象的概念更深入了一层.我们可将其想象为一个“纯”抽象类.它允许创建者规定一个类的基本形式:方法名.自变量列表以及返回类型,但不规定方法主体.接口也包含了基本数据 ...

  8. JavaScript基础知识总结（三）

    JavaScript语法 七.循环语句 1.while 语法: while (exp) { //statements; } 说明:while (变量<=结束值) { 需执行的代码 } 例子: / ...

  9. ABP领域层

    1.实体Entites 1.1 概念 实体是DDD(领域驱动设计)的核心概念之一. 实体是具有唯一标识的ID且存储在数据库总.实体通常被映射成数据库中的一个表. 在ABP中,实体继承自Entity类. ...

  10. Web应用之LAMP源码环境部署

    一.LAMP环境的介绍 1.LAMP环境的重要性 思索许久,最终还是决定写一篇详细的LAMP的源码编译安装的实验文档,一来是为了给自己一个交代,把技术进行系统的归纳,将技术以极致的形式呈现出来,做为一 ...