為了看著界面舒服，我這里用到了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）就能讀數(shù)據(jù)流，網(wǎng)上有很多這方面的介紹，就不做介紹了。
我這里只是重點介紹，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>導入數(shù)據(jù)如下：</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）就能讀數(shù)據(jù)流，網(wǎng)上有很多這方面的介紹，就不做介紹了。
我這里只是重點介紹，form表單驗證與ajax上傳文件方法
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
