ajax無重新整理上傳圖片,基於springMVC
阿新 • • 發佈:2019-02-08
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();
}
後臺controler程式碼(這裡上傳圖片是上傳到又拍雲):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); } }
/** * 圖片上傳 * @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