你的位置:首页 > 软件开发 > ASP.net > input type=file上传控件假样式

input type=file上传控件假样式

发布时间:2016-12-27 14:00:08
采用bootstrap框架样式<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head runat="server"> <meta ht ...

input type=file上传控件假样式

采用bootstrap框架样式

<!DOCTYPE html><html ="http://www.w3.org/1999/xhtml"><head runat="server">  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>  <script src='/images/loading.gif' data-original="../../theme/pc_global.js"></script>  <script src='/images/loading.gif' data-original="../../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",//"        //在请求之前调用的函数        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 (//调用出错执行的函数        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上传控件假样式

关键词:上传

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。