为了看着界面舒服,我这里用到了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
页面样式截图:
废话不多说。上代码:
<%@ 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上传文件方法