使⽤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">
<!--⾃动⽣成id(string类型) -->
<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层没什么逻辑，代码在此省略
@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 =Parameter("type");
String order =Parameter("order");
Integer displayOrder =Integer.parseInt(order);
String DirectoryName ="/upload";
Image image =new Image();
if (uploader !=null) {
image.setUploader(uploader);
}
image.setUploadTime(DateUtil._MM_dd_HH_mm_ss, new Date()));
image.setType(type);
//System.out.println("displayOrder"+ Class().getName() + displayOrder);
String fileName =null;
if (file !=null) {
//取得当前上传⽂件的⽂件名称
String myFileName = OriginalFilename();
//System.out.println("myfileName"+myFileName);
// System.out.println("⽂件名称"+ContentType());
/
/如果名称不为""，说明该⽂件存在，否则说明该⽂件不存在
if (im() !="") {
//获得图⽚的原始名称
String originalFilename = OriginalFilename();
//System.out.println("originalFilename----"+originalFilename);
//获得图⽚后缀名称，如果后缀不为图⽚格式，则不上传
String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
//获得上传路径的绝对路径地址(/upload)-->
String realPath = Session().getServletContext().getRealPath("/" + DirectoryName);
// System.out.println(realPath);
//如果路径不存在，则创建该路径
File realPathDirectory =new File(realPath);
if (realPathDirectory ==null || !ists()) {
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 {
}catch (Exception e) {
e.printStackTrace();
}
image.ContextPath()+ DirectoryName +"\\" + fileName);
Image image_1 =new Image();
image_1.setType(type);
//根椐类型查询
List<Image> list =ImageList(image_1);
if (list.size() != 0) {
//图⽚是满的就替换
if (list.size() == 4) {
for (Image image2 : list) {
DisplayOrder().equals(displayOrder)) {
imageService.delImage(image2);
}
}
image.setDisplayOrder(displayOrder);
imageService.addImage(image);
//图⽚没满就往后推移
}else {
for (Image image2 : list) {
if(!DisplayOrder().equals(displayOrder)){
image.setDisplayOrder(displayOrder); }else {
image.setDisplayOrder(list.size()+1); }
}
imageService.addImage(image);
}
}else {
image.setDisplayOrder(1);
imageService.addImage(image);
}
}
}
}
jquery自动轮播图代码4.HTML代码
<div class="trd pic add">
<!-- enctype="multipart/form-data"是图⽚上传的基础，必须有 -->
<form id="fm" name="fm"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">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</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="(-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); }
});
})
}
};
发表评论