DWZ中uploadify多文件上传

Uploadify是国外一款优秀jQuery插件，其主要功能是批量上传文件。

在DWZ中文件上传引用uploadify插件操作多文件上传，由于DWZ已经帮我们已经绑定好js，在页面我们只需根据dwz参考文档进行参数配置即可

upload.jsp

<input id="testFileInput2" type="file" name="image2" 
		uploaderOption="{
			swf:'uploadify/scripts/uploadify.swf',
			uploader:'main?up=11&operationID=1205',
			formData:{},
			queueID:'fileQueue',
			buttonImage:'uploadify/img/add.jpg',
			buttonClass:'my-uploadify-button',
			width:102,
			auto:false,
			onUploadSuccess:uploadifySuccess
		}"
	/>
	
	<div id="fileQueue" class="fileQueue"></div>
	
	<input type="image" src="uploadify/img/upload.jpg" οnclick="$('#testFileInput2').uploadify('upload', '*');"/>
	<input type="image" src="uploadify/img/cancel.jpg" οnclick="$('#testFileInput2').uploadify('cancel', '*');"/>
	<input id="uploadUrl" type="hidden" value ="${uploadUrl }" name="uploadUrl" />
	<input id="files" type="hidden" value ="" name="files" />
	<input type="image" src="uploadify/img/submit.jpg" οnclick="upload();" /> 
	<div class="divider"></div>

在java后台对发送数据进行处理，文件存放目录是Tomcat下面的data文件夹（没有则先创建）

UploadController,java

String savePath = req.getSession().getServletContext().getRealPath("");
		   savePath = savePath + "\\data\\";
		   //把文件上传到服务器指定位置，并向前台返回文件名
		   if(req.getParameter("up")!=null){
		 	DiskFileItemFactory fac = new DiskFileItemFactory();
		   ServletFileUpload upload = new ServletFileUpload(fac);
		   upload.setHeaderEncoding("utf-8");
		   List fileList = null;
		   try {
			//文件类型解析req
		    fileList = upload.parseRequest(req);
		   } catch (FileUploadException ex) {
			   //终止文件上传，此处抛出异常
		    ex.printStackTrace();
		   }
		   Iterator it = fileList.iterator();
		   while (it.hasNext()) {
			   String  extName ="";
			    FileItem item = (FileItem) it.next();
			    if (!item.isFormField()) {
			    	String  name = item.getName();
			     String type = item.getContentType();
			     if (item.getName() == null || item.getName().trim().equals("")) {
			      continue;
			     }
			     File file = new File(savePath+name);
			     try {
			    	 //将文件存入本地服务器
					item.write(file); 
					//向前台返回文件名
					PrintWriter pw = response.getWriter();
					pw.print(name);
					pw.close();
					pw.flush();
				} catch (Exception e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			   }
			  }

这样文件上传过程中没有取消或者文件出现问题则能成功上传至Tomcat服务器

当文件上传成功后，我们可以调用Uploadify的回调函数

dwz.ajax.js

/**
 * http://www.uploadify.com/documentation/uploadify/onqueuecomplete/	
 */
function uploadifyQueueComplete(queueData){

	var msg = "The total number of files uploaded: "+queueData.uploadsSuccessful+"<br/>"
		+ "The total number of errors while uploading: "+queueData.uploadsErrored+"<br/>"
		+ "The total number of bytes uploaded: "+queueData.queueBytesUploaded+"<br/>"
		+ "The average speed of all uploaded files: "+queueData.averageSpeed;
	
	if (queueData.uploadsErrored) {
//		alertMsg.error(msg);
	} else {
//		alertMsg.correct(msg);
	}
}
/**
 * http://www.uploadify.com/documentation/uploadify/onuploadsuccess/
 */
function uploadifySuccess(file, data, response){
	//获取后台返回到前台的文件名，添加到隐藏域,多文件用";"号隔开
	var files = $("#files").attr("value");
//	alert(files=="");
	//第一个文件
	if(files=="")
		files = data;
	else
		files+=";"+data
//	alert(files);
	$("#files").attr("value",files);
	
}

/**
 * http://www.uploadify.com/documentation/uploadify/onuploaderror/
 */
function uploadifyError(file, errorCode, errorMsg) {
//	alertMsg.error(errorCode+": "+errorMsg);
}


/**
 * http://www.uploadify.com/documentation/
 * @param {Object} event
 * @param {Object} queueID
 * @param {Object} fileObj
 * @param {Object} errorObj
 */
function uploadifyError(event, queueId, fileObj, errorObj){
//	alert("event:" + event + "\nqueueId:" + queueId + "\nfileObj.name:" 
//		+ fileObj.name + "\nerrorObj.type:" + errorObj.type + "\nerrorObj.info:" + errorObj.info);
}

我在做文件上传功能时候主要调用uploadifySuccess函数，在单个文件上传之后调用该函数，将后台返回的文件名拼装在隐藏域中（upload.js红色部分）

用户确定上传时候点击提交（upload.js绿色部分）触发upload（）函数

function upload(callback){
	var files = $("#files").attr("value");
	var uploadUrl = $("#uploadUrl").attr("value");
	var url = uploadUrl+"&files="+escape(encodeURIComponent(files));
	$("#files").attr("value","");
//	alert(url);
	var $callback = callback || navTabAjaxDone;
	if (! $.isFunction($callback)) $callback = eval('(' + callback + ')');
	$.ajax({
		type:'GET',
		url:url,
		dataType:"json",
		contentType: "application/x-www-form-urlencoded; charset=utf-8",
		cache: false,
		success: $callback,
		error: DWZ.ajaxError
	});
}

  后台获取文件名就能将文件写入数据库，返回前台执行结果即可
 特别提示：uploadify以来浏览器的flush进行文件加载，如果浏览器没有安装flush组件，是没办法使用的！！！