使用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层没什么逻辑，代码在此省略

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) {

                    //取得当前上传文件的文件名称