图片上传（支持多张）——java 【解决（图片上传成功，ajax请求仍会返回错误）】

图片上传（支持多张）

html端主要代码

// 主要代码 <form id="iForm" enctype="multipart/form-data"> <input type="file" multiple="multiple" id="file" name="fileupload" onchange="uploadHeadImg_pic(this)"> </form> <script type="text/javascript" src="js/ajaxfileupload.js"></script> <script type="text/javascript" src="js/pic_upload.js"></script>

所引用的js：ajaxfileupload.js

// ajaxfileupload.js jQuery.extend({ //2013-06-19 Etoak_james 增加函数handleError 解决jQuery.handleError is not a function异常 handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } }, createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if(typeof uri== 'boolean'){ io.src = 'javascript:false'; } else if(typeof uri== 'string'){ io.src = uri; } } else { var io = document.createElement('iframe'); io.id = frameId; io.name = frameId; } io.style.position = 'absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; document.body.appendChild(io); return io; }, createUploadForm: function(id, fileElementId) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); var oldElement = $('#' + fileElementId); var newElement = $(oldElement).clone(); $(oldElement).attr('id', fileId); $(oldElement).before(newElement); $(oldElement).appendTo(form); $(form).css('position', 'absolute'); $(form).css('top', '-1200px'); $(form).css('left', '-1200px'); $(form).appendTo('body'); return form; }, ajaxFileUpload: function(s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = new Date().getTime(); var form = jQuery.createUploadForm(id, s.fileElementId); var io = jQuery.createUploadIframe(id, s.secureuri); var frameId = 'jUploadFrame' + id; var formId = 'jUploadForm' + id; // Watch for a new set of requests if ( s.global && ! jQuery.active++ ) { jQuery.event.trigger( "ajaxStart" ); } var requestDone = false; // Create the request object var xml = {}; if ( s.global ) jQuery.event.trigger("ajaxSend", [xml, s]); // Wait for a response to come back var uploadCallback = function(isTimeout) { var io = document.getElementById(frameId); try { if(io.contentWindow) { xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null; xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document; }else if(io.contentDocument) { xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null; xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document; } }catch(e) { jQuery.handleError(s, xml, null, e); } if ( xml || isTimeout == "timeout") { requestDone = true; var status; try { status = isTimeout != "timeout" ? "success" : "error"; // Make sure that the request was successful or notmodified if ( status != "error" ) { // process the data (runs the xml through httpData regardless of callback) var data = jQuery.uploadHttpData( xml, s.dataType ); // If a local callback was specified, fire it and pass it the data if ( s.success ) s.success( data, status ); // Fire the global callback if( s.global ) jQuery.event.trigger( "ajaxSuccess", [xml, s] ); } else jQuery.handleError(s, xml, status); } catch(e) { status = "error"; jQuery.handleError(s, xml, status, e); } // The request was completed if( s.global ) jQuery.event.trigger( "ajaxComplete", [xml, s] ); // Handle the global AJAX counter if ( s.global && ! --jQuery.active ) jQuery.event.trigger( "ajaxStop" ); // Process result if ( s.complete ) s.complete(xml, status); jQuery(io).unbind(); setTimeout(function() { try { $(io).remove(); $(form).remove(); } catch(e) { jQuery.handleError(s, xml, null, e); } }, 100) xml = null } } // Timeout checker if ( s.timeout > 0 ) { setTimeout(function(){ // Check to see if the request is still happening if( !requestDone ) uploadCallback( "timeout" ); }, s.timeout); } try { var form = $('#' + formId); $(form).attr('action', s.url); $(form).attr('method', 'POST'); $(form).attr('target', frameId); if(form.encoding) { form.encoding = 'multipart/form-data'; } else { form.enctype = 'multipart/form-data'; } $(form).submit(); } catch(e) { jQuery.handleError(s, xml, null, e); } if(window.attachEvent){ document.getElementById(frameId).attachEvent('onload', uploadCallback); } else{ document.getElementById(frameId).addEventListener('load', uploadCallback, false); } return {abort: function () { }}; }, uploadHttpData: function( r, type ) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // If the type is "script", eval it in global context if ( type == "script" ){ jQuery.globalEval( data ); } // Get the JavaScript object, if JSON is used. if ( type == "json" ){ // alert(data) eval( "data = " + data );// //经修改 原因：图片上传成功ajax请求仍会报错 var data = r.responseText; var rx = new RegExp("<pre.*?>(.*?)</pre>","i"); var am = rx.exec(data); //this is the desired data extracted var data = (am) ? am[1] : ""; //the only submatch or empty // alert(data) eval( "data = " + data ); } if ( type == "html" ){ jQuery("<div>").html(data).evalScripts(); } return data; } });

所引用的js：pic_upload.js

// pic_upload.js function uploadHeadImg_pic(obj){ //批量上传图片 layer.load();//添加进度条 $.ajaxFileUpload({ url:"/.../uploadManypic.json?query="+ +new Date().getTime(),//需要链接到服务器地址 secureuri:false, fileElementId:"file",//文件选择框的id属性 ,//文件选择框的id属性 dataType: 'json', //json contentType: false, //不可缺 processData: false, //不可缺 success: function (data){ layer.closeAll('loading'); //关闭进度条 //图片信息list集合 //alert("个数"+data.list.length) }, error:function(error){ layer.closeAll('loading'); //关闭进度条 lalert('网络原因操作失败！','error'); } }); }

后端java代码：

// uploadManypic.json @RequestMapping("/uploadManypic.json") public @ResponseBody JSONMap<String,Object> UploadManypic( @RequestParam(value="file",required=false)MultipartFile[] file, HttpServletRequest request,HttpServletResponse response, HttpSession session) throws IOException { JSONMap<String,Object> model = new JSONMap<String,Object>(); try{ File targetFile=null; String msg="";//返回存储路径 int code=1; ArrayList<Upload> list = new ArrayList<Upload>(); if (file!=null && file.length>0) { for (int i = 0; i < file.length; i++) { String fileName=file[i].getOriginalFilename();//获取文件名加后缀 if(fileName!=null&&fileName!=""){ //上下文项目名 String projectName=""; try{ projectName = request.getServletContext().getContextPath().substring(1); }catch(Exception e){ projectName="ROOT"; } //上传文件夹名 String floderName = "Upload/image"; //首字母大写 floderName = projectName + floderName.substring(0,1).toUpperCase() + floderName.substring(1) + "/"; //文件保存目录路径 String savePath = request.getServletContext().getRealPath("/").replace(projectName,""); savePath = savePath + floderName; //文件保存目录URL //String saveUrl = request.getContextPath().replace(projectName,""); String saveUrl = floderName; //检查/创建根目录 File uploadDir = new File(savePath); if(!uploadDir.exists()){ uploadDir.mkdirs(); } SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String ymd = sdf.format(new Date()); savePath += ymd + "/"; saveUrl += ymd + "/"; String returnUrl = saveUrl;//存储路径 String path =savePath; //文件存储位置 String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀 String name=fileName; fileName=System.currentTimeMillis()+fileF;//新的文件名 //先判断文件是否存在 // String fileAdd = ymd; File file1 =new File(path); //如果文件夹不存在则创建 if(!file1 .exists() && !file1 .isDirectory()){ file1 .mkdir(); } targetFile = new File(file1, fileName); file[i].transferTo(targetFile); msg=returnUrl+fileName; Upload upload = new Upload(); upload.setFilename(name);//真实文件名 upload.setFilepath(msg);//文件路径 list.add(upload); } } model.put("list", list); } model.put(SysConstant.OP_FLAG, true); model.put(SysConstant.OP_MESSAGE, SysConstant.SUCCESS); return model; } catch (Exception e) { e.printStackTrace(); model.put(SysConstant.OP_FLAG, false); model.put(SysConstant.OP_MESSAGE, SysConstant.Exception); return model; } }

相关的实体类：

package com.repast.core.uiview; public class Upload { /** * 文件名 * */ private String filename; /** * 相对路径 * */ private String filepath; /** * 上传日期 * */ private String uploaddate; /** * 服务器端文件名字 * */ private String servername; /** * 真实路径 * */ private String fileRealpath; /** * 文件大小（KB） */ private String filesize; public String getFileRealpath() { return fileRealpath; } public void setFileRealpath(String fileRealpath) { this.fileRealpath = fileRealpath; } public String getFilename() { return filename; } public void setFilename(String filename) { this.filename = filename; } public String getFilepath() { return filepath; } public void setFilepath(String filepath) { this.filepath = filepath; } public String getUploaddate() { return uploaddate; } public void setUploaddate(String uploaddate) { this.uploaddate = uploaddate; } public String getServername() { return servername; } public void setServername(String servername) { this.servername = servername; } public String getFilesize() { return filesize; } public void setFilesize(String filesize) { this.filesize = filesize; } }

完