1. 程式人生 > >ajax無重新整理上傳圖片,基於springMVC

ajax無重新整理上傳圖片,基於springMVC

html程式碼(圖片上傳Fform表單裡的target屬性的值frameFile,是form之後的iframe的name值,

這樣的寫法是讓當前的form表單在提交表單內容的時候轉交給iframe中進行頁面中表單處理, 並且不會產生當前頁面跳轉!):
<form id="imageUP_fr" action="${BasePath}qiji_admin/imageUpload" method="post" target='frameFile' enctype="multipart/form-data">
	<img width='200' src='' height='150' id='imgShow' alt='image' />
	<div class="fbwz_tit">
	<span>釋出文章圖片</span>
	<label><input type="file" id="file_upload" name="fileUpload"/></label>
	<lable id="uploadLog"></lable>
	<a href="javascript:;">刪除封面</a>
	<a href="javascript:toUpload();">上傳</a>
	</div>
</form>
<iframe id='frameFile' name='frameFile' style='display: none;'></iframe>

js程式碼:
function toUpload(){
	if($("#file_upload").val() == null || ""==$("#file_upload").val()){
		alert("請選擇檔案");
		return;
	}
	 $('#uploadLog').html('開始上傳中....');
	$("#imageUP_fr").submit();
}
function uploadSuccess(msg) {
    if (msg.split('|').length > 1) {
        $('#imgShow').attr('src', msg.split('|')[1]);
        $('#uploadLog').html(msg.split('|')[0]);
        $("#wz_imageSrc").val(msg.split('|')[1]);
    } else {
        $('#uploadLog').html(msg);
    }
}
後臺controler程式碼(這裡上傳圖片是上傳到又拍雲):
/**
	 * 圖片上傳
	 * @param file
	 * @param request
	 * @return
	 */
	@RequestMapping("/imageUpload")
	@ResponseBody
	public String imageUpload(@RequestParam("fileUpload") CommonsMultipartFile file,HttpServletRequest request){
		String strDate = DateUtil.getStrDateShort()+"/";
		String filePath = Constant.DIR_ROOT+strDate+file.getOriginalFilename();
		try {
			
			UpYun upyun = new UpYun(Constant.BUCKET_NAME, Constant.OPERATOR_NAME, Constant.OPERATOR_PWD);
			upyun.setTimeout(120);
			// 設定待上傳檔案的 Content-MD5 值
			// 如果又拍雲服務端收到的檔案MD5值與使用者設定的不一致,將回報 406 NotAcceptable 錯誤
//			upyun.setContentMD5(UpYun.md5(file);
			
			// 設定待上傳檔案的"訪問金鑰"
			// 注意:
			// 僅支援圖片空!,設定金鑰後,無法根據原檔案URL直接訪問,需帶URL後面加上(縮圖間隔標誌符+金鑰)進行訪問
			// 舉例:
			// 如果縮圖間隔標誌符為"!",金鑰為"bac",上傳檔案路徑為"/folder/test.jpg",
			// 那麼該圖片的對外訪問地址為:http://空間域名 /folder/test.jpg!bac
//			upyun.setFileSecret("bac");
			
			// 上傳檔案,並自動建立父級目錄(最多10級)
			boolean result = upyun.writeFile(filePath, StreamUtil.toByteArray(file.getInputStream()), true);
			if(result){
				return "<script>window.parent.uploadSuccess('Upload Success!|"+Constant.UP_URL +strDate + file.getFileItem().getName() + "');</script>";
			}
		} catch (IOException e) {
			e.printStackTrace();
			return "<script>window.parent.uploadSuccess('Upload error')";
		}
		return "<script>window.parent.uploadSuccess('Upload error')";
	}



參考:http://www.cnblogs.com/zcttxs/archive/2013/07/09/3180509.html