SpringMVC下的Ajaxfileupload实现文件异步上传

依赖

<!--文件上传-->
    <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>

在 SpringMVC 中声明文件上传的组件

<!--文件上传-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--单位是字节-->
        <property name="maxUploadSize" value="20971520"/>
</bean>

在前端写出文件上传的组件，要注意的是文件上传标签的 id 和 name 必须保持一致，如下图的：imgPath

<div class="input fileInput">
     图片介绍 <input id="imgPath" type="file" name="imgPath">
     <button id="file" type="button">上传图片</button>
     <img id="fileimg" src="">
</div>

JQuery 代码

$(function (){
    $("#file")[0].onclick = function (){
        $.ajaxFileUpload({
            url:"fileupload",
            secureuri:false,
            fileElementId:"imgPath",
            dataType:"JSON",
            success:function (resp){
                alert(resp);
                $("#fileimg").attr("src",resp);
            }
        })
    }
})

/*
1.url　　　　　　　　 上传处理程序地址,动态资源地址　　
2.fileElementId　　  需要上传的文件域的ID，即<input type="file">的ID。
3.secureuri　　　　  是否启用安全提交，默认为false。 
4.dataType　　　　　 服务器返回的数据类型，可以为xml,script,json,html。
5.success　　　　　　提交成功后自动执行的处理函数，参数resp就是服务器返回的数据。
6.error　　　　　　　提交失败自动执行的处理函数。
7.type 　　　　　　　当要提交自定义参数时，这个参数要设置成post
*/

在后端写出控制器方法

PS:

后台接收文件的MultipartFile 的形参名必须与前端 <input type="file"> 的 id 名一致，否则会找不到上传文件

对于SpringMVC中的 Object 为返回值的控制器方法
若想返回对象，则使用：produces="application/json;charset=utf-8"
若想返回String，则使用：produces="text/html;charset=utf-8"

@Controller
public class ProductionController {

    //异步Ajax文件上传
    @ResponseBody
    @RequestMapping(value="/fileupload",produces="text/html;charset=utf-8")
    public Object fileUpload(MultipartFile imgPath, HttpServletRequest request,
                             HttpSession session) throws IOException {

        //获取存储图片的用户级目录
        String savePath = request.getServletContext().getRealPath("/") +
                    "static\\image_user\\" + session.getAttribute("username");
        //若用户级目录不存在创建用户根目录
        File userDirectory = new File(savePath);
        if(! userDirectory.exists()){
            userDirectory.mkdir();
        }
        //为文件起新名字
        String fileName = FileUtils.getNewName(imgPath);
        //将上传的文件转存到指定的用户级目录
        imgPath.transferTo(new File(savePath,fileName));
        //将路径返回到前端
        return "static/image_user/"+session.getAttribute("username")+"/"+fileName;

    }
}