/**
*页面提交的图片转base64字符串。
*base64字符串中有\s,\t,\n转义字符,需要用空字符串替换掉他们。
*base64字符串在http传输中,其中的+号会被弄丢,导致图片无法
*正常显示,例如这段代码最后return的时候,如果是redirect重定向
*或者forward转发携带字符串,下一个controller方法接收到的
*base64字符串+号会丢掉
*
**/
@RequestMapping("/upload")
public String upload(@RequestParam("image") MultipartFile file, Model model) {
BASE64Encoder bEncoder = new BASE64Encoder();
String[] suffixArra = file.getOriginalFilename().split("\\.");
String preffix = "data:image/jpg;base64,".replace("jpg", suffixArra[suffixArra.length - 1]);
String base64EncoderImg = null;
try {
base64EncoderImg = preffix + bEncoder.encode(file.getBytes()).replaceAll("[\\s*\t\n\r]", "");
} catch (IOException e) {
e.printStackTrace();
}
model.addAttribute("base64Str", base64EncoderImg);
return "upload_image";
// return "redirect:/index?base64Str?" + base64Str;
}
//以下是页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
</head>
<body>
<title>图片上传功能</title>
选择图片:
<form action="/upload" enctype="multipart/form-data" method="post" onsubmit="return beforeSubmit()">
<input type="file" name="image">
<input type="submit" value="上传"/>
</form>
<#--如果base64Str为空就显示网图-->
<img id="img"
src="${base64Str!"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1544667855,450621728&fm=26&gp=0.jpg"}"
style="margin-top: 30px;width: 300px;height: 150px;"/>
</body>
<script>
function beforeSubmit() {
var img = $("input[name='image']").get(0).files[0];
if (img == undefined || img.size <= 0 || img.name == null) {
alert("你还没选择图片");
return false;
} else {
return true;
}
return false;
}
</script>
</html>