專案中用到圖片的無重新整理上傳，因此想到用ajaxUpLoadFile來解決。

第一步，先在上傳圖片的頁面引入你下載到本地的ajaxfileupload.js檔案。檔案下載地址：http://download.csdn.net/detail/up19910522/7471163

第二步，編寫上傳檔案的js程式碼

function upLoadImage() {
	var f = document.getElementById('fileToUpload').files[0];
	alert(f.name); $.ajaxFileUpload({
				fileElementId : 'fileToUpload',
				url : '/ZHDM/chat/uploadImage',
				dataType : 'text',
				data : {},
				async : true,
				error : function(data) {
					alert(data);
					alert("網路異常，請重試");
				},
				success : function(message) {
					alert(message);
				}
			})
}
 

第三步，後臺接收檔案並存儲

@RequestMapping(value = "uploadImage", method = RequestMethod.POST)
	public @ResponseBody
	String uploadImage(HttpServletRequest request)
			throws IllegalStateException, IOException {
		System.out.println("進入控制層");
		String pathString="";
		User loginUser = (User) request.getSession().getAttribute("loginUser");
		// 判斷SESSION是否失效
		if (loginUser == null || "".equals(loginUser)) {
			return "250";
		}
		int loginUserId = loginUser.getUserId();
		List<String> paths = new ArrayList<>();
		// 設定上下文
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
				request.getSession().getServletContext());
		// 檢查form是否有enctype="multipart/form-data"
		if (multipartResolver.isMultipart(request)) {

			MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;

			Iterator<String> iter = multiRequest.getFileNames();

			while (iter.hasNext()) {
				// 由CommonsMultipartFile繼承而來,擁有上面的方法.
				MultipartFile file = multiRequest.getFile(iter.next());
				System.out.println("file:" + file.getSize());
				// 如果檔案不為空，則進行處理
				if (!file.isEmpty()) {
					// 對圖片檔名進行處理，取得最後的6個字元，然後以"."為分隔符取得檔案字尾
					String originalFileName = file.getOriginalFilename();

					// 取得字尾
					String suffixString = originalFileName
							.substring(originalFileName.lastIndexOf(".") + 1);

					// 取得IP地址
					String ip = new CheckIPImpl().checkIpAddress(request);

					// 取得IP地址+時間戳 作為檔名 防止檔名重複
					IPTimeStamp ipTimeStamp = new IPTimeStamp(ip);
					String randomFileName = ipTimeStamp.getIPTimeRand();

					// 設定檔名稱
					String fileName = randomFileName + "." + suffixString;

					// 地址為d:\\fileupload\\license資料夾下
					String path = "D:" + File.separator + "fileupload"
							+ File.separator + "chat" + File.separator
							+ fileName;
					String targerpath = "D:" + File.separator + "fileupload"
							+ File.separator + "chat" + File.separator + "m"
							+ fileName;
					File localFile = new File(path);

					try {
						file.transferTo(localFile);
						// 將圖片名稱和相對路徑存到資料庫中
						paths.add("/pic/chat/" + fileName);
						pathString = "pic/chat/" + fileName;
					} catch (IllegalStateException e) {
						e.printStackTrace();
					} catch (IOException e) {
						e.printStackTrace();
					}
				}

			}
		}
		// pathString="cao";
		return pathString;
	}

<div class="creatGroup ml50" id="addlicensephoto">
		<h5>
			<span class="pngIcon deleteIcon fr" onclick="HideUpLoadpic()"></span>上傳證照
		</h5>
		<div class="crearCon searchMain">
			<form id="uploadform"  enctype="multipart/form-data" name="uploadform" method="post" onsubmit="return Checkuploadform()">
				<ul class="cons clearfix">
				    <li class="clear"><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="uploadinput" ></li>
			</form>
		</div>
	</div>

筆者這裡順道把後臺返回給前臺的json出錯的問題解決了。

就是將Ajax中的

	dataType : 'json',換成

	dataType : 'text',