SpringMVC+Ajax用FormData對象上傳頁面的圖片（檔案），並且立馬在頁面上顯示出來

頁面表單：

<form id="frm_identityA" action="" enctype="multipart/form-data"><span style="display:none"><input type="file" id="identityA" name="identityA" value=""></span><input type="hidden" name="mobile" value="***********"></form>

頁面圖片標籤和按鈕：

<img id="img_identityA" src="app/images/icon011.png" alt="" name="img_identityA"/>

<button type="button" id="button_identityA" class="btn btn-primary btn-lg btn-block">點擊上傳圖片</button>

頁面操作：

// 點擊按鈕的時候選擇圖片$("#button_identityA").click(function(){$("#identityA").click();});// input框改變的時候將圖片發送給後台$("#identityA").change(function() {var formData = new FormData($("#frm_identityA")[0]);$.ajax({url : "userregeste/file/upload.do", // 自行按需配置好完整的url，包括ip和連接埠號碼type : "POST",data : formData,async : false,cache : false,contentType : false,processData : false,success : function(returndata) {alert("success");$("#img_identityA").attr("src","userregeste/file/showImages.do?mobile=***********&name=identityA&"+new Date().toTimeString());$("#img_identityA").attr("width","124");$("#img_identityA").attr("height","124");},error : function(returndata) {alert("error");$("#img_identityA").attr("src","app/images/icon011.png");}});});

Spring配置：

<!-- 圖片擷取 maxUploadSize：設定最大限制 位元組為單位--><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="1024000"></property></bean>

Action中的代碼：
1、圖片上傳

@Controller@RequestMapping("/userregeste")public class ImageUpLoadAction {/** * 存放上傳的圖片資訊 */private static Map<String,byte[]> images;static {images = new HashMap<String, byte[]>();}@RequestMapping("/file/upload")public ProcessResultModel upLoad(HttpServletRequest request,HttpServletResponse response) {// 從請求中擷取到檔案資訊需要將請求轉換為MultipartHttpServletRequest類型MultipartHttpServletRequest MulRequest = request instanceof MultipartHttpServletRequest ? (MultipartHttpServletRequest) request : null;request.getParameter("mobile");// 依然可以從請求中擷取到除圖片之外的參數Iterator<String> fileNames = MulRequest.getFileNames();if (fileNames.hasNext()) { // 遍曆請求中的圖片資訊String fileName = fileNames.next(); // 圖片對應的參數名log.debug("fileName:" + fileName);file = MulRequest.getFile(fileName); // 擷取到圖片if (file != null) {log.debug("file.getSize():" + file.getSize()); // 圖片大小file.getBytes();// 可以擷取到圖片的位元組數組images.put(fileName,file.getBytes());// 擷取到圖片以位元組數組形式儲存在伺服器記憶體中}}}}

2、圖片顯示
Ajax請求發送成功之後的方法中的操作，
$("#img_identityA").attr("src","userregeste/file/showImages.do?mobile=***********&name=identityA&"+new Date().toTimeString());
值得一提的是，img標籤中的src屬性，對於UI人員來說就是存放靜態圖片資源的，但是對於程式員來說，應該要知道img標籤實際上會根據src屬性去發送一次請求。同時，瀏覽器對於img的src屬性的處理方式是如果src屬性值不變，只會發送一次請求，所有加上new Date().toTimeString()，使每次的請求都不相同。
代碼如下：

@RequestMapping("/file/showImages")public String showImages(HttpServletRequest request,HttpServletResponse response) throws IOException {log.debug("請求地址："+request.getRequestURI()+",開始擷取圖片");OutputStream sout = null;String mobile = request.getParameter("mobile");String name = request.getParameter("name"); // 圖片名稱log.debug("mobile："+mobile+"name："+name);if (mobile == null || name == null) {log.debug("手機號或圖片名為空白，擷取圖片失敗。");return null;}byte[] pictrue = null;// 從本地Map中去擷取images圖片pictrue = images.get(name);log.debug("圖片大小："+pictrue.length);try {if (pictrue != null) {response.setContentType("text/html");sout = response.getOutputStream();sout.write(pictrue);sout.flush();sout.close();sout = null;} else {return null;}} catch (Exception e) {e.printStackTrace();} finally {if (sout != null) {sout.close();sout = null;}}log.debug("返回圖片成功。");return null;}

如此，頁面上會成功的顯示圖片。

*需要的jar包除了SpringMVC的所有jar包之外，還需要
commons-fileupload-1.3.1.jar
commons-io.jar
*設定enctype="multipart/form-data"後，表單資料是以二進位形式進行傳輸的，commons-fileupload-1.3.1.jar 即是幫我們解析位元據並且封裝到parameter裡面，不添加這個包，從HttpServletRequest擷取不到參數，可以擷取二進位流資料自行解析。
*以上的實現動態將圖片傳送到後台，可以在後台對圖片進行一系列處理，效率比較高。

頁面效果：