使用FormData格式上传图像并预览图片

前言

做项目时，遇到表单中图像需要跟表单一起提交，这样会造成后台没办法接收到图片。后面上网调查后，明白表单提交时是默认application/x-www-form-urlencoded格式，只接受键值对。所以以下例子采用FormData格式异步提交表单，因为formData格式可以接收文件格式。

具体流程

1.引入maven

<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>

2.在全局配置文件中引入相关配置

    <!--multipart处理类--><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="10485760"/><property name="maxInMemorySize" value="4096"/></bean>3, 153, 153);">1

2345

3.定义jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<body>
<h1>使用formData形式上传文件</h1><form id="uploadForm" method="post" action="/upload.ajax" ><input type="file" id="avatar" name="avatar" onchange="previewImage('preview',this)" ><img id="preview"><button id="submit" type="button">提交</button></form>
</body>
</html>
<script src="/media/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">//检验文件格式并预览function previewImage(preImageId, imageFile) {var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;if (!pattern.test(imageFile.value)) {alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");imageFile.focus();$(imageFile).val("");return false;} else {var path;if (document.all)//IE{imageFile.select();path = document.selection.createRange().text;}else//FF{path = URL.createObjectURL(imageFile.files[0]);}$('#' + preImageId).attr('src', path);}}$('#submit').on('click',function () {var formData = new FormData($( "#uploadForm" )[0]);console.log(formData);$.ajax({type: 'POST',url: '/upload.ajax',data: formData,contentType: false,processData: false,success: function (result) {console.log(result);},});});
</script>

4.后台采用MultiPartFile接收文件

@RequestMapping("upload.ajax")@ResponseBodypublic String upload(MultipartFile avatar){//处理avatar逻辑return "success";}

后语

该实现并不难，主要了解表单提交格式和相关实现即可。希望可以帮到相关人员。

转载于:https://www.cnblogs.com/jpfss/p/8960840.html

使用FormData格式上传图像并预览图片相关推荐

2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
在BAE搭建的Django中实现图片上传并用jquery预览图片
在BAE上搭建好了django,如何实现图片上传并预览呢? 想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url.可是返回数据的话,网页就会重定向.因此想要在上传页面预览 ...
java实现文件上传预览_jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件效果如图直接看代码吧 template部分 <div class="file-upload&q ...
html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是, ...
struts上传word和excel文件到oracle,Struts文件上传,下载,重传,预览
[Struts2]☆★之文件上传,下载,重传,预览今日群里一兄弟问我能否给一份struts文件上传下载的例子,因为自己项目比较紧所以想在网上找些源码给他,但是纵观全网,写的都不是太全,这让新手使用 ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
PHP上传文件并预览
达到上传文件并预览效果主要是一下代码: <h4>文件信息</h4> <?php if ($_SERVER["REQUEST_METHOD"] == & ...

使用FormData格式上传图像并预览图片

前言

具体流程

后语

使用FormData格式上传图像并预览图片相关推荐

最新文章

热门文章