利用ajax+springmvc完成上传图片并显示
前言:还是由于前期没有系统的学习,又坑了自己一把。
第一点:SpringMVC在接受图片,需要在springmvc中配置解析上传文件的解析器。
第二点:ajax上传文件时,使用的FormData对象。
第三点:tomcat读取磁盘中图片时,tomcat默认从项目下查找。
OK,开始!!
一:导入jar包
导入jquery文件,json支持jar包,springmvc支持jsonjar包
二:写jsp页面
<body>
这是一个注册页面
<div> <img id="image" width="200"></div>
上传头像: <input type="file" name="file" id="file"/>
<input type="button" value="上传" onclick="doUpload()" />
</body>
img等会用来显示上传的图片
三:写javaScript
这里涉及FormData对象,不多解释,传送门:https://blog.csdn.net/hefeng6500/article/details/78644510
<script type="text/javascript">
function doUpload() {
var formData = new FormData();
var file = document.querySelector("#file").files[0];
formData.append("file",file);
$.ajax({
url: "upload" ,
data: formData,
type: "POST",
dataType:"json",
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
$("#image").attr("src",data.path);
},
error: function (returndata) {
alert("上传失败");
}
});
}
</script>
四:写controller
首先还是先配置文件解析器
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- one of the properties available; the maximum file size in bytes -->
<property name="resolveLazily" value="true" />
<property name="maxUploadSize" value="10485760" />
</bean>
在着,书写controller,下面返回的路径这么写的原因,请参见下面两篇博文:
Tomcat对于资源的读取路径问题:https://blog.csdn.net/qq_29410905/article/details/79675838
添加虚拟路径来解决:https://blog.csdn.net/a515557595_xzb/article/details/79259771
我的图片资源保存在E:/image下。
@Controller
public class registerController {
@RequestMapping(value = "upload")
@ResponseBody
public Map<String, Object> upload(HttpServletRequest request,
@RequestParam(value="file", required=false) MultipartFile file) throws Exception, IOException {
String path = "/image/"+file.getOriginalFilename();
file.transferTo(new File("E:"+path));
Map<String, Object> map = new HashMap<>();
map.put("path", path);
return map;
}
}
五:ok