为了看着界面舒服,我这里用到了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
页面样式截图:
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
页面样式截图:
![](http://dl.iteye.com/upload/attachment/0080/5353/94e9aa48-3769-3d83-b825-e3ac8384ba1e.gif)
废话不多说。上代码:
- <%@ 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上传文件方法
![](https://i-blog.csdnimg.cn/blog_migrate/9a7f23dae8026cac2e2fc8c509ea592e.gif)