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" onclick="$('#testFileInput2').uploadify('upload', '*');"/><input type="image" src="uploadify/img/cancel.jpg" onclick="$('#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" onclick="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 blocke.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;elsefiles+=";"+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组件，是没办法使用的！！！