導入部分javascript
<script type="text/javascript" src="js/jquery-1.8.3.min.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.form.js"></script>
HTML部分css
<fieldset class="layui-elem-field layui-col-xs12 margin20"> <legend>監控點校驗</legend> <div class="layui-col-xs12" style='padding: 10px;'> <form enctype="multipart/form-data" id="batchUpload" action="上傳地址" method="post" class="form-horizontal"> <input id="uploadEventPath" class="fileInp" disabled="disabled" type="text" placeholder="請選擇excel文件"/> <input type="file" name="file" id="uploadEventFile" style="position: absolute;width: 5%;cursor: pointer;opacity: 0;filter: alpha(opacity=00);height:30px;"/> //隱藏file文件上傳按鈕 <button type="button" class="layui-btn layui-btn-normal layui-btn-sm chooseB" id="uploadEventBtn" style="cursor: pointer;">選擇文件</button> </form> <button type="button" class="layui-btn layui-btn-normal layui-btn-sm chooseB" id="jy">上傳校驗</button> </div> </fieldset>
JS部分java
<script type="text/javascript"> layui.use(['form', 'layer','table'], function () { var form = layui.form,layer = layui.layer,table = layui.table; var loading; $("#uploadEventFile").bind("change", function() { $("#uploadEventPath").attr("value",$("#uploadEventFile").val()); }); $("#jy").click(function(){ var uploadEventFile = $("#uploadEventFile").val(); if (uploadEventFile == "") { layer.alert("請選擇excel文件,再上傳!"); } else if (uploadEventFile.lastIndexOf(".xls") < 0) {//可判斷以.xls和.xlsx結尾的excel layer.alert("只能上傳Excel文件!"); }else if (uploadEventFile.lastIndexOf("abc.xlsx") < 0) {//可判斷以.xls和.xlsx結尾的excel layer.alert("文件名稱必須是 「abc.xlsx」 請更改文件名稱!");return false; }else{ loading = layer.msg("數據加載中,請稍候...", {icon : 16,shade : 0.4,time : 10000}); $("#batchUpload").ajaxSubmit({//jquery.form 兼容ie8文件上傳 type:"post", url:"url地址", dataType:"json", success:function(result){ layer.close(loading); console.log(result); }, error:function(data){ layer.alert("系統錯誤,請聯繫管理員!"); }, }); } }); }); </script>
報錯處理jquery
在IE8瀏覽器中,若是報錯 「拒絕訪問」,這個時候是由於在ie中除非你點擊file控件的瀏覽按鈕,不然是沒有權限去上傳文件的,也就是說不能夠經過js來控制file控件value的方法上傳文件。若是以爲file難看的話,能夠動過css樣式來隱藏file,以及一些處理來使file變得好看些。ajax
以上就是完整的代碼。在IE891011以及搜狗瀏覽器中(極速模式和IE模式)測試經過。json
僅作記錄。瀏覽器