jquery form插件 上传/导入excel-ajax验证

9 篇文章 0 订阅

为了看着界面舒服,我这里用到了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 
页面样式截图: 
 

废话不多说。上代码: 
Html代码   收藏代码
  1. <%@ page contentType="text/html;charset=GBK" language="java" %>  
  2.   
  3. <!DOCTYPE html>  
  4. <html>  
  5. <head>  
  6.     <title>导入</title>  
  7.   
  8.     <link href="css/bootstrap.min.css" rel="stylesheet">  
  9.     <script src="js/jquery-1.8.2.min.js"></script>  
  10.     <script src="js/jquery.form-3.26.0.js"></script>  
  11.     <script src="js/jquery.validate.min-1.7.js"></script>  
  12.     <script src="js/bootstrap.min.js"></script>  
  13.     <script src="js/bootstrap.file-input.js"></script>  
  14. </head>  
  15. <body>  
  16.     <div class="container">  
  17.         <h3>导入Excel</h3>  
  18.         <form id="uploadimg-form"  action="" method="post">  
  19.             <input type="file" title="选择文件" name="fileUpload" id="fileUpload"/><br /><br />  
  20.             <input id="fileBtn" type="submit" class="btn" value="文件上传"/><br /><br />  
  21.         </form>  
  22.   
  23.         <div id="showData" style="display: none;">  
  24.             <div>  
  25.                 <p>导入数据如下:</p>  
  26.                 <p id="jsonShow"></p>  
  27.             </div>  
  28.         </div>  
  29.     </div>  
  30.   
  31.     <script type="text/javascript">  
  32.         $(function() {  
  33.             $("#uploadimg-form").resetForm().validate({  
  34.                 rules: {  
  35.                     "fileUpload": {  
  36.                         required: true,  
  37.                         accept: "xls"  
  38.                     }  
  39.                 },  
  40.                 messages: {  
  41.                     "fileUpload": {  
  42.                         required: "请选择上传文件",  
  43.                         accept: "文件格式不支持,请上传 xls 格式的文件"  
  44.                     }  
  45.                 },  
  46.                 submitHandler: function() {  
  47.                     $("#uploadimg-form").ajaxSubmit({  
  48.                         url:"ajax.jsp?m=uploadExcel",  
  49.                         type:"post",  
  50.                         enctype:"multipart/form-data",  
  51.                         contentType: "application/x-www-form-urlencoded; charset=utf-8",  
  52.                         dataType:"json",  
  53.                         success: function(data){  
  54.                             var str = "";  
  55.                             for (var i=0len=data.length; i < len; i++) {  
  56.                                 str += "<p>";  
  57.                                 str += data[i]["deparement"] + "," + data[i]["name"] + "," + data[i]["date"];  
  58.                                 str += "</p>";  
  59.                             }  
  60.                             $("#jsonShow").append(str);  
  61.                             $("#showData").removeAttr("style");  
  62.                             $("#jsonBtn").removeAttr("disabled").removeAttr("title");  
  63.                         },  
  64.                         error: function() {  
  65.                             alert('error');  
  66.                         }  
  67.                     });  
  68.                     return false;  
  69.                 }  
  70.             });  
  71.         });  
  72.     </script>  
  73. </body>  
  74. </html>  

前台js成功提交到后台后,使用POI(Java)就能读数据流,网上有很多这方面的介绍,就不做介绍了。 
我这里只是重点介绍,form表单验证与ajax上传文件方法  
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值