使用ajax实现文件上传，后台使用springMVC接受处理

注意：

• form表单提交input的type=file时，form的enctype="multipart/form-data"，才能提交file的文件流到后台
• 必须用FormData对象存储和提交表单中的值
• FormData的append方法存储表单数据

下面以上传图片为例：

HTML代码：
 

<form action="" method="post" id="addProduct">
      产品图片：<input type="file" name="file" id="file"/>
               <input type="button" value="添加" id="add_button"/>
                </form>

JS代码：

var url = document.getElementById("file").value; //获取图片名字
    var hasFile = url === "";                    //判断是否选中图片
    console.log(hasFile);
    url = url.split(".");                        //获取图片后缀名
    image_url = "图片" + "." + url[url.length - 1];  //重新生成图片名
    upImage(image_url); 

function upImage(image_url) {
    var formData = new FormData($("#addProduct")[0]);  //获取表单的图片数据
//    console.log($('#file')[0]);
//    formData.append("file", $('#file')[0]);
//    
    formData.append("fileName", image_url);
    $.ajax({
        type: "post",
        url: "/cv/private/upimage",   //接受处理的url
        async: true,
        data: formData,
        processData: false, //必须false才会避开jQuery对 formdata 的默认处理   
        contentType: false, //必须false才会自动加上正确的Content-Type 
        success: function (data) {
            console.log(data);
            }
         });

java代码：

//成功返回1
@RequestMapping("/upimage")
    public void upImage(@RequestParam("file") MultipartFile file, @RequestParam("fileName") String fileName, HttpServletResponse response, HttpServletRequest request) throws IOException {
        int num;
        if (!file.isEmpty()) {
            //System.out.println(1);
            String dirPath = request.getSession().getServletContext().getRealPath("/") + "/upImage";
            File filePath = new File(dirPath);
            System.out.println(filePath.getAbsolutePath());
            if (!filePath.exists()) {
                //System.out.println(2);
                response.getWriter().print("{\"num\":" + 0 + "}");
                return;
            }
            try {
                //System.out.println(3);
                file.transferTo(new File(dirPath + "/" + fileName));
                num = 1;
                response.getWriter().print("{\"num\":" + num + "}");
            } catch (Exception e) {
                e.printStackTrace();
                //System.out.println(4);
                response.getWriter().print("{\"num\":" + 0 + "}");
            }
        }//end if
        else {
            response.getWriter().print("{\"num\":" + 0 + "}");
        }
    }

参考：

https://www.cnblogs.com/zmdblog/p/10949527.html

https://blog.csdn.net/qq_19551571/article/details/49977983