使用ajaxSubmit方法实现多文件上传(异步)

1、上传按钮

<button onclick="toImport()" class="btn green">
	导入<i class="icon-upload-alt"></i>
</button>

2、文件选择弹出层和添加组件的html代码

<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(){

 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);
					<span style="color:#FF0000;">oTable.fnDraw();    //列表信息使用Datatables来显示</span>
					$(".append").remove();
				}
			}				
		});
			 
	}
//提醒对话框
	function notification(title,message){
		$.gritter.add({
			title:	title,text:	message,time:	2000,sticky: false
		});		
	}

6、Java代码：ImportFileAction(注意要添加相应的get和set方法)

public class ImportFileAction extends BaseAction{
    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];
                    //……文件内容读取(略)
                }
        }
    }
}

7、效果图

8、用到的js、css、gif及部分代码可点击这里http://download.csdn.net/detail/zdx1515888659/7657895下载

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!