input type='file'上传控件假样式

2016-12-27 19:57:53来源:cnblogs.com作者:zhyue93人点击

采用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>

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台