ajx异步上传图片并显示

最新推荐文章于 2023-06-16 11:53:09 发布

oldGarlic

最新推荐文章于 2023-06-16 11:53:09 发布

阅读量2.5k

点赞数

分类专栏： ajax 文章标签： ajax springmvc

本文链接：https://blog.csdn.net/qq_40008535/article/details/82994197

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用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

oldGarlic

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ajx异步上传图片并显示

利用ajax+springmvc完成上传图片并显示前言：还是由于前期没有系统的学习，又坑了自己一把。第一点：SpringMVC在接受图片，需要在springmvc中配置解析上传文件的解析器。第二点：ajax上传文件时，使用的FormData对象。第三点：tomcat读取磁盘中图片时，tomcat默认从项目下查找。OK，开始！！一：导入jar包导入jquery文件，jso...
复制链接

扫一扫

专栏目录