1、結果圖：
2、前端代碼：
<body>
<div>
<img src="" id="imgViwe" style="width: 150px; height: 200px" />
<input type="file" id="file" style="display: none" multiple="multiple"/>
<a href="javascript:void(0)" onclick="selectImg()">選擇圖片</a>
<a href="javascript:void(0)" onclick="uploadImg()">上 傳</a>
<!-- href="javascript:void(0) : 讓超鏈接去執行一個js函數，而不是去跳轉到一個地址-->
</div>
</body>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script>
function selectImg() {
$("#file").click();
}
/*能回顯，但不能上傳*/
$("#file").on('change', function () {
var objUrl = getObjectURL(this.files[0]) ;
if (objUrl) {
$("#imgViwe").attr("src", objUrl);
}
});
/*真正上傳*/
function uploadImg() {
var file = $("#file")[0].files[0];
console.log("@@@-->" + file);
if (file){
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: "/upload",
type: "post",
data: formData,
contentType: false,
processData: false,
success: function (res) {
console.log(JSON.stringify(res));
}
})
}
}
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
3、后端代碼（java實現）：
@PostMapping("/upload")
@ResponseBody
public JSONObject upload(@RequestPart(name = "file", required = false) MultipartFile file, HttpServletRequest request){
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM");
JSONObject jsonObject = new JSONObject();
String originalFilename = file.getOriginalFilename();
// 獲取文件后綴
String suffix = originalFilename.substring(originalFilename.lastIndexOf(".") + 1, originalFilename.length());
// 拼接文件上傳路徑
String savePath = Global.getProfile() + "upload/" + sdf.format(new Date()) + "/";
File savePathFile = new File(savePath);
if (!savePathFile.exists()) {
//若不存在該目錄，則創建目錄
savePathFile.mkdirs();
}
String filename = UuidUtil.get32UUID() + "." + suffix; // 文件重命名
try {
//將文件保存指定目錄
File filePath = new File(savePath + filename);
file.transferTo(filePath);
} catch (Exception e) {
jsonObject.put("type", "error");
jsonObject.put("msg", "保存文件異常！");
e.printStackTrace();
return jsonObject;
}
jsonObject.put("type", "success");
jsonObject.put("msg", "上傳圖片成功！");
return jsonObject;
}
Global.java
package com.jd.blog.common;
public class Global {
private static String profile = "D:/file/uploadImg/";
public static String getProfile() {
return profile;
}
public static void setDirPath(String profile) {
this.profile = profile;
}
}