<div class="std_photo"> 请上传图片:<img id="pictureImage1" name="pictureImage1" src="${userDto.pictureImage}" height="200" width="100" /> <input type="hidden" id="pictureImage" name="pictureImage" value=""> <input id="file" type="file" name="file" /> <input type="button" value="保存" class="btn" /> </div>
其中 类型type为hidden的控件为一个隐藏域,它专门用来用userDto里面的pictureImage交互的。而img图片控件同userDto.pictureImage绑定起来。 通过点击保存响应一个ajax事件.
2.ajax响应事件,如下所示:
function ajaxFileUpload() { $.ajaxFileUpload({ url : 'FileUploadForm.do?method=uploadAjax', // 需要链接到服务器地址 secureuri : false, fileElementId : 'file', // 文件选择框的id属性 dataType : 'json', // 服务器返回的格式,可以是json success : function(data, status) // 相当于java中try语句块的用法 { //alert("成功: " + data.path); $("#pictureImage1")[0].src = data.path; $("#pictureImage").val(data.path); }, error : function(data, status, e) // 相当于java中catch语句块的用法 { alert("失败"); } }); }
注意:这个ajax事件用到了一个JS文件,为:
<script type="text/javascript" src="${contextPath}/js/base/user/ajaxfileupload.js"></script>3.ajax文件中使用到的文件上传控制器,如下所示:
/* * Copyright (C) 2012 GZ-ISCAS Inc., All Rights Reserved. */ package cn.ac.iscas.gz.nssc.base.web.user; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.util.FileCopyUtils; import org.springframework.validation.BindingResult; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MaxUploadSizeExceededException; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.servlet.HandlerExceptionResolver; import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.view.RedirectView; import cn.ac.iscas.gz.nssc.base.domain.UploadForm; /** * @ClassName: UploadFormController * @Description: 文件上传控制器controller * @author xuzhongming Email: [email protected] * @date 2012-2-23 - 下午3:34:43 * @version : 1.0 */ @Controller @RequestMapping(value = "/FileUploadForm.do") public class UploadFormController { @RequestMapping(params = "method=uploadAjax") public void uploadAjax(@RequestParam(value = "file") MultipartFile file, HttpServletRequest request, HttpServletResponse response) { String uploadDirPath = request.getSession().getServletContext() .getRealPath("/upload"); MultipartFile image = file; File destFile = new File(uploadDirPath + "/" + image.getOriginalFilename()); try { FileCopyUtils.copy(image.getBytes(), destFile); } catch (IOException e) { e.printStackTrace(); } String destPath = request.getContextPath() + "/upload/" + destFile.getName(); try { JSONObject jsonObject = new JSONObject(); jsonObject.put("path", destPath); response.setContentType("text/html"); response.getWriter().println(jsonObject.toString()); } catch (IOException e) { e.printStackTrace(); } } }
4.在配置文件中注册
<!-- Configure the multipart resolver --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="utf-8" > <!-- one of the properties available; the maximum file size in bytes --> <property name="maxUploadSize" value="1024000"/> </bean>