功能需求：Spring MVC框架下，实现无刷新页面上传图片，并展示图片预览效果
直接上代码：
1.图片预览效果
<%@ page contentType="text/html;charset=UTF-8"%> <html> <head> <title>本地图片上传预览</title> <script> function PreviewImage(imgFile) { var pattern = /(.*.jpg$)|(.*.png$)|(.*.jpeg$)|(.*.gif$)|(.*.bmp$)/; if(!pattern.test(imgFile.value)) { alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！"); imgFile.focus(); } else { var path; if(document.all)//IE { imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML=""; document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="" + path + "")";//使用滤镜效果 } else//FF { path = URL.createObjectURL(imgFile.files[0]); document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>"; } } } </script> </head> <body> <center> <input type="file" onchange='PreviewImage(this)' /> <div id="imgPreview" style='500px; height:400px;'> <img src=""/> </div> </center> </body> </html>
2.spring配置文件添加支持文件上传
<!-- 支持上传文件 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
3.调用ajaxFileUpload插件
/** * 企业用户注册 * @param registerObj * @param RegisterJs */ companyRegister: function (registerObj, RegisterJs) { var phone = registerObj.phone; // 手机号 var password = registerObj.password; // 密码 var email = registerObj.email; // 邮箱（登录用户名） var company = registerObj.company; // 公司名称 var companyAddress = registerObj.companyAddress; // 公司详细地址 var companyEmail = registerObj.companyEmail; // 企业邮箱 var companyPhone = registerObj.companyPhone; // 企业电话 var companyWebsite = registerObj.companyWebsite; // 公司网址 var userType = registerObj.userType; // 0:个人 1：企业 $.ajaxFileUpload({ url: ctx + '/Register/companyRegister.action', //用于文件上传的服务器端请求地址 data: { phone: phone, password: password, email: email, company: company, companyAddress: companyAddress, companyEmail: companyEmail, companyPhone: companyPhone, companyWebsite: companyWebsite, userType: userType }, secureuri: false, //是否需要安全协议，一般设置为false fileElementId: 'licenseImg', //文件上传域的ID dataType: 'json', //返回值类型 一般设置为json success: function (data, status) { //服务器成功响应处理函数 if (data) { var status = data.status; var errorMsg = data.errorMsg; if (status == 1) { RegisterJs.changeStep(3); } else { showMessage(errorMsg); } } else { showMessage("系统异常，请联系管理员！"); } }, error: function (data, status, e) {//服务器响应失败处理函数 showMessage(e); } }); }
4.修改ajaxFileUpload.js文件中Json处理代码
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") data = r.responseText; var start = data.indexOf(">"); if (start != -1) { var end = data.indexOf("<", start + 1); if (end != -1) { data = data.substring(start + 1, end); } } eval("data = " + data); // evaluate scripts within html if (type == "html") jQuery("<div>").html(data).evalScripts(); return data; }
*关键部分：
if (type == "json") data = r.responseText; var start = data.indexOf(">"); if (start != -1) { var end = data.indexOf("<", start + 1); if (end != -1) { data = data.substring(start + 1, end); } } eval("data = " + data);
ajaxFileUpload.js全部源码：
jQuery.extend({ createUploadIframe: function (id, uri) { //create frame var frameId = 'jUploadFrame' + id; var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'; if (window.ActiveXObject) { if (typeof uri == 'boolean') { iframeHtml += ' src="' + 'javascript:false' + '"'; } else if (typeof uri == 'string') { iframeHtml += ' src="' + uri + '"'; } } iframeHtml += ' />'; jQuery(iframeHtml).appendTo(document.body); return jQuery('#' + frameId).get(0); }, createUploadForm: function (id, fileElementId, data, fileElement) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); if (data) { for (var i in data) { jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } var oldElement; if (fileElement == null) oldElement = jQuery('#' + fileElementId); else oldElement = fileElement; var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(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, (typeof(s.data) == 'undefined' ? false : s.data), s.fileElement); 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 { jQuery(io).remove(); jQuery(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 = jQuery('#' + formId); jQuery(form).attr('action', s.url); jQuery(form).attr('method', 'POST'); jQuery(form).attr('target', frameId); if (form.encoding) { jQuery(form).attr('encoding', 'multipart/form-data'); } else { jQuery(form).attr('enctype', 'multipart/form-data'); } jQuery(form).submit(); } catch (e) { jQuery.handleError(s, xml, null, e); } jQuery('#' + frameId).load(uploadCallback); return { abort: function () { try { jQuery('#' + frameId).remove(); jQuery(form).remove(); } catch (e) { } } }; }, 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") data = r.responseText; var start = data.indexOf(">"); if (start != -1) { var end = data.indexOf("<", start + 1); if (end != -1) { data = data.substring(start + 1, end); } } eval("data = " + data); // evaluate scripts within html if (type == "html") jQuery("<div>").html(data).evalScripts(); return data; }, handleError: function (s, xml, status, e) { // If a local callback was specified, fire it if (s.error) s.error(xml, status, e); // Fire the global callback if (s.global) jQuery.event.trigger("ajaxError", [xml, s, e]); } });
5.后台处理
/** * 企业用户注册 * * @param response * @param user */ @RequestMapping("/companyRegister") public void companyRegister(@RequestParam(value = "licenseImg", required = true) MultipartFile licenseImg, HttpServletResponse response, HttpServletRequest request, User user) { String email = user.getEmail(); JSONObject jsonObject = new JSONObject(); try { String fileName = uploadImg(request, licenseImg, user.getEmail()); if(StringUtils.isNotEmpty(fileName)){ user.setBusinessLicense(fileName); } userService.save(user); removeAuthCode(email); jsonObject.put("status", "1"); jsonObject.put("errorMsg", "发送成功"); response.getWriter().print(jsonObject); } catch (Exception e) { logger.error("企业用户注册异常【" + email + "】：", e); } } /** * 保存图片 * * @param request * @param licenseImg * @param email * @return */ public String uploadImg(HttpServletRequest request, MultipartFile licenseImg, String email) { SimpleDateFormat format = new SimpleDateFormat("yyyyMMdd"); try { String path = request.getSession().getServletContext().getRealPath("upload"); String dateFolder = format.format(new Date()); path += File.separator + dateFolder; String fileName = licenseImg.getOriginalFilename(); String suffix = fileName.substring(fileName.lastIndexOf(".")); fileName = UUID.randomUUID() + suffix; File targetFile = new File(path, fileName); if (!targetFile.exists()) { targetFile.mkdirs(); } //保存图片 licenseImg.transferTo(targetFile); return "/" + dateFolder + "/" + fileName; } catch (Exception e) { logger.error("上传营业执照异常【" + email + "】：", e); } return null; }