為了看著界面舒服,我這里用到了bootstrap,還用到jquery相關插件。
jquery-1.8.2.min.js
jquery.form-3.26.0.js
jquery.validate.min-1.7.js
bootstrap-v2.2.2
bootstrap.file-input.js
上傳文件樣式和插件使用: bootstrap + bootstrap.file-input
表單驗證使用:jquery-1.8.2.min.js + jquery.form-3.26.0.js + jquery.validate.min-1.7.js
頁面樣式截圖:
廢話不多說。上代碼:
前臺js成功提交到后臺后,使用POI(Java)就能讀數據流,網上有很多這方面的介紹,就不做介紹了。
我這里只是重點介紹,form表單驗證與ajax上傳文件方法
jquery-1.8.2.min.js
jquery.form-3.26.0.js
jquery.validate.min-1.7.js
bootstrap-v2.2.2
bootstrap.file-input.js
上傳文件樣式和插件使用: bootstrap + bootstrap.file-input
表單驗證使用:jquery-1.8.2.min.js + jquery.form-3.26.0.js + jquery.validate.min-1.7.js
頁面樣式截圖:

廢話不多說。上代碼:
<%@ page contentType="text/html;charset=GBK" language="java" %> <!DOCTYPE html> <html> <head> <title>導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/jquery.form-3.26.0.js"></script> <script src="js/jquery.validate.min-1.7.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.file-input.js"></script> </head> <body> <div class="container"> <h3>導入Excel</h3> <form id="uploadimg-form" action="" method="post"> <input type="file" title="選擇文件" name="fileUpload" id="fileUpload"/><br /><br /> <input id="fileBtn" type="submit" class="btn" value=" 文件上傳 "/><br /><br /> </form> <div id="showData" style="display: none;"> <div> <p>導入數據如下:</p> <p id="jsonShow"></p> </div> </div> </div> <script type="text/javascript"> $(function() { $("#uploadimg-form").resetForm().validate({ rules: { "fileUpload": { required: true, accept: "xls" } }, messages: { "fileUpload": { required: "請選擇上傳文件", accept: "文件格式不支持,請上傳 xls 格式的文件" } }, submitHandler: function() { $("#uploadimg-form").ajaxSubmit({ url:"ajax.jsp?m=uploadExcel", type:"post", enctype:"multipart/form-data", contentType: "application/x-www-form-urlencoded; charset=utf-8", dataType:"json", success: function(data){ var str = ""; for (var i=0, len=data.length; i < len; i++) { str += "<p>"; str += data[i]["deparement"] + "," + data[i]["name"] + "," + data[i]["date"]; str += "</p>"; } $("#jsonShow").append(str); $("#showData").removeAttr("style"); $("#jsonBtn").removeAttr("disabled").removeAttr("title"); }, error: function() { alert('error'); } }); return false; } }); }); </script> </body> </html>
前臺js成功提交到后臺后,使用POI(Java)就能讀數據流,網上有很多這方面的介紹,就不做介紹了。
我這里只是重點介紹,form表單驗證與ajax上傳文件方法

更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
