Struts2 Ajax文件上传功能 使用Jquery.form插件



Struts2 Ajax文件上传功能 使用Jquery.form插件，jquery form 教程地址:http://www.malsup.com/jquery/form/#getting-started

 

Form表单:

 

  1. <form id=”uploadTMForm” method=”POST” enctype=”multipart/form-data”>
  2.            <table>
  3.                 <tr>
  4.                     <td>Upload : <input type=”file” name=”excelFile” id=”uploadTMFile”/></td>
  5.                 </tr>
  6.                 <tr>
  7.                     <td>
  8.                         <input type=”submit” value=”Submit” />
  9.                         <input type=”button” value=”Cancel” onclick=’$(“#uploadTM”).dialog(“close”)’/>
  10.                     </td>
  11.                 </tr>
  12.             </table>
  13.             <div id=”upMessage” style=”displan:hidden”></div>
  14.         </form>

 


JS 脚本

 

[javascript] view plaincopyprint?

  1. //upload excel
  2.         var validateForm = function() {
  3.             var fileName = $(“#uploadTMFile”).val();
  4.             fileName = fileName.substring(fileName.lastIndexOf(“.”)+1)
  5.             if(fileName != ”xls” && fileName != ”xlsx”){
  6.                 alert(“Formart Error! \rPlease select file by .xls or .xlsx!”);
  7.                 return false;
  8.             }
  9.             $(‘#upMessage’).html(‘File Upload … …’);
  10.             return true;
  11.         };
  13.          var showResponse = function(data,status) {
  14.              $(‘#upMessage’).fadeIn(“fast”,function(){
  15.                  console.log(data)
  16.              });
  17.             return true;
  18.           };
  19.          var options={
  20.               target : ’#upMessage’,
  21.                  url : ’<%=request.getContextPath()%>/teammember/viewUploadTeamMember.action’,
  22.                  beforeSubmit: validateForm,
  23.                  success : showResponse,
  24.                  resetForm:true
  25.              };
  26.          $(‘#uploadTMForm’).ajaxForm(options);

Struts2 拦截

 

 

  1. <interceptor-ref name=”fileUpload”>
  2.                 <param name=”allowedTypes”>application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet</param>
  3.                 <param name=”maximumSize”>1024*1024*5</param>
  4.             </interceptor-ref>