Ajax很好用，但是在上傳文件這邊卻總是會出問題。例如，現(xiàn)在想上傳一張圖片，希望前臺無刷新操作，使用Ajax上傳，后臺接收不到相應(yīng)的類型，導(dǎo)致上傳失敗，但是如果使用input和submit組合又會出現(xiàn)頁面刷新的情況，百般折磨后找到了一個新的工具:Simple-Ajax-Uploader.
簡單示例
前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btnUpload">上傳圖片</button>
<script type="text/javascript" src="SimpleAjaxUploader.js"></script>
<script type="text/javascript">
var btnUpload = document.getElementById("btnUpload");
var uploader = new ss.SimpleUpload({
button: btnUpload,
url: "http://192.168.1.105:8080/api/file/upload/image",
name: "uploadImage",
multiple: true,
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
responseType: 'json',
onSubmit: function () {
},
onComplete: function (filename, response) {
console.log(filename);
console.log(response);
},
onError: function (error) {
console.log(error);
}
});
</script>
</body>
</html>
后臺代碼
/**
* 單張圖片上傳接口
*
* @param request 請求
* @param uploadImage 要上傳的圖片
* @return 上傳成功返回圖片的URL；上傳失敗返回“上傳失敗”；
*/
@ApiOperation(value = "單張圖片上傳接口")
@RequestMapping(value = "/upload/image", method = RequestMethod.POST)
@ResponseBody
@Transactional
public HttpResponse<String> uploadImage(HttpServletRequest request, MultipartFile uploadImage) {
HttpResponse<String> httpResponse = new HttpResponse<>();
if (null != uploadImage) {
String uploadImagePath = request.getSession().getServletContext().getRealPath("/") + "/file/upload/image/";
File uploadImageDir = new File(uploadImagePath);
if (!uploadImageDir.exists()) {
boolean success = uploadImageDir.mkdir();
if (success) {
System.out.println("文件夾創(chuàng)建成功");
} else {
System.out.println("文件夾創(chuàng)建失敗");
}
}
// 初始化圖片信息
Image image = initImage(uploadImage);
// 要保存的圖片
File saveToServerImage = new File(uploadImagePath + image.getName());
try {
// 將要上傳的圖片信息寫入要保存的圖片中
uploadImage.transferTo(saveToServerImage);
// 將圖片信息存儲到數(shù)據(jù)庫
Image saveToDbImage = imageJPA.save(image);
if (null != saveToDbImage) {
httpResponse.setCode(1);
httpResponse.setData(saveToDbImage.getUrl());
httpResponse.setMsg("圖片上傳成功");
return httpResponse;
}
} catch (IOException e) {
System.out.println(e.getMessage());
}
}
httpResponse.setCode(0);
httpResponse.setData("");
httpResponse.setMsg("圖片上傳失敗");
return httpResponse;
}
這樣就可以無刷新解決問題啦。
upload.gif
