采用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. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  2. 【疯狂造轮子-iOS】JSON转Model系列之二

    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...

  3. ASP.NET路由模型解析

    大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...

  4. Socket聊天程序——服务端

    写在前面: 昨天在博客记录自己抽空写的一个Socket聊天程序的初始设计,那是这个程序的整体设计,为了完整性,今天把服务端的设计细化记录一下,首页贴出Socket聊天程序的服务端大体设计图,如下图: ...

  5. [APUE]系统数据文件与信息

    一.口令文件 UNIX口令文件包含下表中的各个字段,这些字段包含在 由于历史原因,口令文件是/bin/passwd,而且是一个文本文件,每一行都包括了上表中的七个字段,字段之间用":&quo ...

  6. 玩转spring boot——结合JPA事务

    接着上篇 一.准备工作 修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  7. [开发笔记]GCC 分支预测优化

    #define likely(x) __builtin_expect(!!(x),1)#define unlikely(x) __builtin_expect(!!(x),0) 用于优化在做分支判断的 ...

  8. ASP.NET MVC5----常见的数据注解和验证

    只要一直走,慢点又何妨. 在使用MVC模式进行开发时,数据注解是经常使用的(模型之上操作),下面是我看书整理的一些常见的用法. 什么是验证,数据注解 验证 从全局来看,发现逻辑仅是整个验证的很小的一部 ...

  9. 调用微信退款接口或发红包接口时出现System.Security.Cryptography.CryptographicException: 出现了内部错误 解决办法

    我总结了一下出现证书无法加载的原因有以下三个 1.证书密码不正确,微信证书密码就是商户号 解决办法:请检查证书密码是不是和商户号一致 2.IIS设置错误,未加载用户配置文件 解决办法:找到网站使用的应 ...

  10. celery使用的一些小坑和技巧(非从无到有的过程)

    纯粹是记录一下自己在刚开始使用的时候遇到的一些坑,以及自己是怎样通过配合redis来解决问题的.文章分为三个部分,一是怎样跑起来,并且怎样监控相关的队列和任务:二是遇到的几个坑:三是给一些自己配合re ...