使用FormData进行Ajax请求异步上传图片案例
工作时遇到一个对轮播图管理的需求，开发过程遇到些问题，总算顺利解决，记录下来供大家参考。原项目是基于SSM框架搭建的，现将Ajax图片上传部分分享如下：
说明：
1. 传统的表单序列化，即通过$('#fm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端，但该方法只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
2. 本文采取的方式是通过FormData对象实现的。如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。
FormData是什么呢？
XMLHttpRequest Level 2添加了一个新的接口FormData，利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的Send()方法来异步的提交这个"表单"。比起普通的ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
1.dao层代码
<insert id="addImage" parameterType="Image">
<selectKey keyProperty="id" resultType="string" order="BEFORE">
SELECTUUID()
selectKey>
insertinto image(id,imgName,path,uploadTime,uploader,type,displayOrder)
values(#{id},#{imgName},#{path},#{uploadTime},#{uploader},#{type},#{displayOrder})
insert>
2.service层没什么逻辑，代码在此省略
3.controller层代码
@Controller
@RequestMapping("/imageManage")
public class ImageController {
@Autowired
private ImageService imageService;
// 新增轮播图片
@RequestMapping("/addImage")
@ResponseBody
public void addImg(
@RequestParam(value ="file", required =false) MultipartFile file,
@RequestParam(value ="uploader", required =false) String uploader,
HttpServletRequestrequest) {
String type =request.getParameter("type");
String order =request.getParameter("order");
Integer displayOrder =Integer.parseInt(order);
String DirectoryName ="/upload";
Image image =new Image();
if (uploader !=null) {
image.setUploader(uploader);
}
image.setUploadTime(DateUtil.DateToStr(DateUtil.yyyy_MM_dd_HH_mm_ss, new Date()));
image.setType(type);
//System.out.println("displayOrder"+ displayOrder.getClass().getName() + displayOrder);
String fileName =null;
if (file !=null) {
//取得当前上传文件的文件名称
String myFileName = file.getOriginalFilename();
//System.out.println("myfileName"+myFileName);
// System.out.println("文件名称"+file.getContentType());
//如果名称不为"",说明该文件存在，否则说明该文件不存在
if (myFileName.trim() !="") {
//获得图片的原始名称
String originalFilename = file.getOriginalFilename();
//System.out.println("originalFilename----"+originalFilename);
//获得图片后缀名称,如果后缀不为图片格式，则不上传
String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
//获得上传路径的绝对路径地址(/upload)-->
String realPath = request.getSession().getServletContext().getRealPath("/" + DirectoryName);
// System.out.println(realPath);
//如果路径不存在，则创建该路径
File realPathDirectory =new File(realPath);
if (realPathDirectory ==null || !realPathDirectory.exists()) {
realPathDirectory.mkdirs();
}
//重命名上传后的文件名 111112323.jpg
String format ="yyyyMMddHHmmss";
SimpleDateFormat simpleDateFormat =new SimpleDateFormat(format);
fileName= simpleDateFormat.format(new Date()) + suffix;
//定义上传路径 .../upload/111112323.jpg
File uploadFile =new File(realPathDirectory +"\\" + fileName);
// System.out.println(uploadFile);
image.setImgName(originalFilename);
//保存
try {
file.transferTo(uploadFile);
}catch (Exception e) {
e.printStackTrace();
}
image.setPath(request.getContextPath()+ DirectoryName +"\\" + fileName);
Image image_1 =new Image();
image_1.setType(type);
//根椐类型查询
List
if (list.size() != 0) {
//图片是满的就替换
if (list.size() == 4) {
for (Image image2 : list) {
if(image2.getDisplayOrder().equals(displayOrder)) {
imageService.delImage(image2);
}
}
image.setDisplayOrder(displayOrder);
imageService.addImage(image);
//图片没满就往后推移
}else {
for (Image image2 : list) {
if(!image2.getDisplayOrder().equals(displayOrder)){
image.setDisplayOrder(displayOrder);
}else {
image.setDisplayOrder(list.size()+1);
}
}
imageService.addImage(image);
}
}else {
image.setDisplayOrder(1);
imageService.addImage(image);
}
}
}
}
4.HTML代码
<div class="trd pic add">
<form id="fm" name="fm" enctype="multipart/form-data" method="post">
<div class="namezone">轮播图新增div>
<div class="tablezoneclearfix">
<div class="left box">请添加图片div>
<div class="left box">
<div class="imageBoxclearfix">
<input type="file" class="file" name="file"/>
<span class="red">图片需处理过span>
div>
div>
<div class="left boxbtn">
展示顺序
<select name="order" id="order">
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
<option value="4">4option>
select>
<select name="type" id="type">
<option value="电脑">电脑option>
<option value="手机">手机option>
select>
<input type="button" class="button" value="保存" id="save"/>
<input type="button" class="button" value="返回" id="back" onclick="history.go(-1)"/>
div>
div>
form>
div>
5.js代码
var addPic = {
//点击保存向后台发送保存的数据
save :function (userName) {
$("#save").click(function () {
$.ajax({
type:"POST",
url:"/HuaMuWebsite/imageManage/addImage?uploader="+userName,
data:new FormData($("#fm")[0]),//序列化表单值
async:false,
contentType:false,//必须有
processData:false,//必须有
error:function(request) {
alert("请求出错！");
},
success:function() {
$(window.parent.document).find("#iframe").attr("src",window.location.href="/HuaMuWebsite/admin/src/sliderCtrl.html?userName="+userName);
}
});
})
}
};
$(function () {
var userName=window.location.href;
var aa=userName.indexOf("=");
if( aa == -1)
return"";
userName=userName.substring(aa+1);
addPic.save(userName);
});
注意：contentType: false,
processData: false,
这两个参数是必须的。二者缺少任何一个都会报错。
ajax方法参数总是记不住，在此顺便将ajax参数整理如下：
1)url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2)type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
3)async: 同步还是异步，要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
4)cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
5)data:要求为Object或String类型的参数，要发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看下边的processData选项。对象必须为key/value键值对格式，例如{key1:"value1",key2:"value2"}转换为&key1=value1&key2=value2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{key:["value1","value2"]}转换为&key=value1&key=value2。
6)dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
7)success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
①由服务器返回，并根据dataType参数进行处理后的数据。
②描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
8)error:要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest,textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
9)contentType：要求为Boolean类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
10)processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
11)jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
12)username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
13)password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。
14)ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
15)scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
16)dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}
17)timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
18)global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
19)beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
20)complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}