使用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
- 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")
@ResponseBody
public String upload(MultipartFile avatar){
//处理avatar逻辑
return "success";
}
- 1
- 2
- 3
- 4
- 5
- 6
后语
- 该实现并不难,主要了解表单提交格式和相关实现即可。希望可以帮到相关人员。
使用FormData格式上传图像并预览图片的更多相关文章
- [.ashx檔?泛型处理例程?]基础入门#2....FileUpload上传前,预览图片(两种作法--ashx与JavaScript)
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- Ajax上传图片以及上传之前先预览
手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- 关于confluence上传文件附件预览查看时出现乱码的问题解决办法
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
- confluence上传文件附件预览乱码问题(linux服务器安装字体操作)
在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...
- 基于Jcrop的图片上传裁剪加预览
最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...
- django 上传头像并预览 3选1
注册页面的头像上传 register.html<!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- 洛谷P1855 榨取kkksc03 [2017年4月计划 动态规划 09]
P1855 榨取kkksc03 题目描述 洛谷的运营组决定,如果一名oier向他的教练推荐洛谷,并能够成功的使用(成功使用的定义是:该团队有20个或以上的成员,上传10道以上的私有题目,布置过一次作业 ...
- GCC/GDB学习
GCC学习 1.gcc是根据后缀名来区分文件的 .c : c语言源文件 .a : 目标文件构成的库文件 .C/.cc/.cxx : c++源文件 .h : 头文件 .i : 预处理过的C源文件 .ii ...
- 媒体查询(media):设置PC端网页居中显示
@media screen and (min-width: 768px){ body{ background-color: #EAEAEA; } #fater{ width: 640px; margi ...
- jQuery 图片上传
1. 概述 1.1 说明 在一些前后端不分离的项目中,经常有一些需要把文件或者图片上传的功能,故记录此代码以便后期使用. 1.2 要求 1.上传,10M以内,限bmp,jpg,png,jpeg等图片格 ...
- Apple Watch和Apple Pay将助苹果成为首家市值万亿美元公司
苹果公司周二盘中市值首次突破7000亿美元,成为标普中首家市值超过7000亿美元的公司,市值是第二名Exxon的1.7倍.有分析师预测苹果在明年的市值将会逼近8000亿美元,不过如果参考著名激进投资人 ...
- 为何需要apigee edge
http://apigee.com/docs/gateway-services/content/what-apigee-edge 越来越多的服务商在网上提供服务,通过各种标准的接口对来自手机.电脑.p ...
- TZOJ4777: 方格取数
4777: 方格取数 Time Limit(Common/Java):1000MS/3000MS Memory Limit:65536KByteTotal Submit: 11 ...
- 10种简单的Java性能优化(转)
本文由 ImportNew - 一直在路上 翻译自 jaxenter.欢迎加入翻译小组.转载请见文末要求. 你是否正打算优化hashCode()方法?是否想要绕开正则表达式?Lukas Eder介绍了 ...
- 用dreamweaver查找页面位置
复制页面的一段代码,然后用Dreamweaver在整个项目中查找代码. 找不到的原因:1.查找的内容是从数据库中读出来的.连数据库文件一起查便知. 2.查找的代码是某个函数生成的.
- Vim学习与总结
1. :w 后面可以加文件名 2. 使用hjkl 来移动光标,当然你也可以使用箭头.j就是向下的箭头,k是向上,h向左, l向右 3. :help <command> → 显示相关命令的 ...