使用ajaxSubmit文件实现多文件的异步上传

1、 <button onclick="toImport()" class="btn green"> 导入<i class="icon-upload-alt"></i> </button> 2、<div id="import_modal" class="modal hide fade"> <form action="${pageContext.request.contextPath }/**/importFile!impXLS.do" id="ajax_form" class="form-horizontal"> <div class="modal-header"> <button type="button" class="close cancelUpload" data-dismiss="modal" aria-hidden="true"></button> <h3> 文件导入 </h3> </div> <div class="modal-body form"> <div class="alert alert-error hide"> <button class="close" data-dismiss="alert"></button> <span> </span> </div> <div class="control-group"> <label class="control-label"> </label> <div class="controls"> <span style="color:red">*注：上传文件个数不能超过5个</span> </div> </div> <div class="control-group"> <label class="control-label"> 选择文件： </label> <div class="controls"> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input"> <i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div> <span class="btn btn-file"> <span class="fileupload-new">浏览...</span> <span class="fileupload-exists">修改...</span> <input type="file" class="default" name="importFile" /> <input type="hidden" name="flag" value="${flag }" /> </span> <button type="button" class="btn green fileupload-append" style="text-align: right"> 新增 </button> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" onclick="ajaxImp()" class="btn red"> 确定 </button> <button type="button" data-dismiss="modal" class="btn cancelUpload"> 取消 </button> </div> </form> </div> <!-- 添加 文档上传组件 start--> <div class="control-group clone" style="display: none"> <label class="control-label"> 选择文件： </label> <div class="controls"> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="input-append"> <div class="uneditable-input"> <i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span> </div> <span class="btn btn-file"> <span class="fileupload-new">浏览...</span> <span class="fileupload-exists">修改...</span> <input type="file" class="default" name="importFile" /> <input type="hidden" name="flag" value="${flag }" /> </span> <span onClick="javascript:toRemoveFile(this);" class="btn red">移除</span> </div> </div> </div> </div> <!-- end --> 3、<div id="loading" class="modal hide fade"> <div class="modal-body"> <p> 数据导入中，请等待... <img src="${pageContext.request.contextPath }/image/select2-spinner.gif" /> </p> </div> </div> 4、//添加文件上传框 限制文件上传个数 $(".fileupload-append").click(function(){ if( $(".form .control-group").length<=5){ var fileuploadModule = $(".clone").clone(true); fileuploadModule.show(); fileuploadModule.removeClass("clone"); fileuploadModule.addClass("append"); $(".form").append(fileuploadModule); }else{ $error.hide(); $("span",$error).html("可上传文件的个数不能超过5个..."); $error.show(); } }); //移除文件上传框和文件 $(".cancelUpload").click(function (){ $(".append").remove(); }); 5、//异步导入文件 function ajaxImp(){ $("#ajax_form").ajaxSubmit({ //clearForm:true, resetForm:true, dataType:'json', type:'post', beforeSubmit:function(formData,jqForm,options){ var $error = $('.alert-error', jqForm); var flag = true; //遍历form中的导入框，判空并验证文件的格式 $(".fileupload-preview",jqForm).each(function (){ var fileName = $(this).text(); $error.hide(); if(App.isEmpty(fileName)){ $("span",$error).html("请选择XLS格式文件进行导入..."); //$error.show(); flag = false; return false; }else if(fileName.lastIndexOf("\.")==-1||fileName.substring(fileName.lastIndexOf("\.")+1).toLowerCase()!='xls'){ $("span",$error).html("导入的文件后缀，必须为XLS..."); //$error.show(); flag = false; return false; } }); if(flag==false){ $error.show();//显示错误信息 return false; } $("#import_modal").modal('hide');//导入文件隐藏 //导入加载框显示 $("#loading").modal({ backdrop:"static", keyboard:false, show:true }); return true; }, success:function(data,statusText){ if(statusText='success'){ $("#loading").modal('hide'); notification(data.headerMessage,data.message); oTable.fnDraw(); $(".append").remove(); } } }); } //提醒对话框 function notification(title,message){ $.gritter.add({ title: title, text: message, time: 2000, sticky: false }); } 6、ImportFileAction(注意要添加相应的get和set方法) private File[] importFile; private String[] importFileFileName; public void impXLS(){ if (!StringUtil.isEmpty(importFile) && importFile.length > 0) { for (int i = 0; i < importFile.length; i++) { File impFile = importFile[i]; //……文件内容读取(略) } } }