<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<titl>上传图片演示</titl></title>
<script th:src="@{/resources/js/js/jquery-3.3.1.min.js}"></script>
<script>
function setImg(obj) {
var f = $(obj).val();
alert(f);
console.log(obj);
if (f == null || f == undefined || f == '') {
return false;
}
if (!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f)) {
alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
$(obj).val('');
return false;
}
var data = new FormData();
console.log(data);
$.each($(obj)[0].files, function (i, file) {
data.append('file', file);
});
console.log(data);
$.ajax({
type: "POST",
url: "/api/uploadImage2", //上传路径
data: data,
cache: false,
contentType: false, //不可缺
processData: false, //不可缺
dataType: "json",
success: function (ret) {
console.log(ret);
if (ret.statusText == "ok") {
alert(ret.imageUrl[0]);
$("#photoUrl").val(ret.imageUrl[0]);//将地址存储好
console.log("图片返回地址:"+ret.imageUrl[0]);
$("#photourlShow").attr("src", ret.imageUrl[0]);//显示图片
} else {
$("#url").val("");
$(obj).val('');
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("上传失败,请检查网络后重试");
}
});
}
</script>
</head>
<body>
<div class="form-group">
<label class="col-sm-2 control-label">身份证正面照片:</label>
<div class="col-sm-10">
<input type="hidden" name="img" id="photoUrl"/>
<input type="file" name="logoFile" id="logoFile" οnchange="setImg(this);">
<span><img id="photourlShow" src="" width="300" height="197"/></span>
</div>
</div>
</body>
</html>
图片上传后台
@RequestMapping(value = "/uploadImage2")
@ResponseBody
public PictureUrl upload2(@RequestParam("file") List<MultipartFile> url, HttpServletRequest request, HttpServletResponse response){
//图片封装对象
System.out.println("参数大小:"+url.size());
PictureUrl pictureUrl = new PictureUrl();
//获取项目请求路径
String contentPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
try{
//判断图片数量
if(url.size() == 0){
pictureUrl.setStatusText("false");
}else{
OutputStream os = null;
//封装返回图片路径列表
List<String> urlList = new ArrayList<>();
for (MultipartFile file : url){
//利用uuid产生新的文件名,防止文件名重复
System.out.println("文件名:"+file.getOriginalFilename());
String fileNam2 = UUID.randomUUID().toString();
String imagePath2 = imagePath + fileNam2+".png";
File file1 = new File(imagePath2);
os = new FileOutputStream(file1);
//将文件写入磁盘中
os.write(file.getBytes());
//图片访问路径
String imageUrl = contentPath+"/image/"+fileNam2+".png";
urlList.add(imageUrl);
System.out.println("文件路径:"+imageUrl);
}
pictureUrl.setStatusText("ok");
pictureUrl.setImageUrl(urlList);
os.flush();
os.close();
}
}catch (Exception e){
e.printStackTrace();
pictureUrl.setStatusText("false");
return pictureUrl;
}
return pictureUrl;
}