jQuery 中 ajax 使用 FormData 上传多个Base64或文件(File)【更新】

---

1. base64(字符串)作为数据源（在前端生成的文件而非选择的文件）。

前端调用上传接口示例

// 图片分组上传，images，subjectTypeImages 为图片转的base64数组，titles是字符串数组。
var formData = new FormData();
images.forEach(function (image) {
    formData.append("picture[]", image);
});
subjectTypeImages.forEach(function (image) {
    formData.append("subjectTypeImages[]", image);
});
subjectStatusImages.forEach(function (image) {
    formData.append("subjectStatusImages[]", image);
});
titles.forEach(function (image) {
    formData.append("titles[]", image);
});
// 而外的参数数据
formData.append("titleKey", titleKey);
formData.append("searchType", searchType);

$.ajax({
    url:'upload.do',
    method:'POST',
    data:formData,
    // 默认为true，设为false后直到ajax请求结束(调完回掉函数)后才会执行$.ajax(...)后面的代码
    async: false, 
    // 下面三个，因为直接使用FormData作为数据，contentType会自动设置，也不需要jquery做进一步的数据处理(序列化)。
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){
        console.log(data);
    },
    error:function(error){
        console.log(error.message);
    }
});

java(springMVC) 后端接收示例

@ResponseBody
@RequestMapping(value = "upload.do", method = RequestMethod.POST)
public Object upload(HttpServletRequest request) throws Exception {
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());

    // 先判断request中是否包涵multipart类型的数据，
    if (multipartResolver.isMultipart(request)) {
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
        String[] picture = multiRequest.getParameterValues("picture[]");
        String[] subjectTypeImages = multiRequest.getParameterValues("subjectTypeImages[]");
        String[] subjectStatusImages = multiRequest.getParameterValues("subjectStatusImages[]");
        String[] titles = multiRequest.getParameterValues("titles[]");
        String searchType = multiRequest.getParameter("searchType");
        String titleKey = multiRequest.getParameter("titleKey");
        
        // todo: any-thing
    }
    return "success";
}

2. form 表单中使用input 选择文件上传， File类型

form 表单

javascript 上传接口调用示例

$("#btn").click(function () {
    // 获取所有文件
    // 1. 使用直接使用form表单获取，会获取所有input值
        var fomdata = new FormData(document.getElementById("form111"));
    // 2. 只获取文件
        var fomdata = new FormData();
        $("#form111").children("input[name='files']").each(function (index, input) {
            for(var i=0; i

java(springMVC) 后端代码示例

@ResponseBody
@RequestMapping(value = "upload.do", method = RequestMethod.POST)
public Object upload(MultipartFile[] files/* files 为input的name，这样就可以获取所有文件的数组了。*/, String filename, HttpServletRequest request) throws Exception {
    // 遍历数组保存文件，并把文件相对路径存到数据库。。。等。
    return "success";
}

推荐一个前端上传组件

• webuploader

• java 后端代码示例

    @ResponseBody
    @RequestMapping(value = "upload.do", method = RequestMethod.POST)
    public Object uploadFile(MultipartFile file, String name1, HttpServletRequest request) throws Exception {
        UploadDto uploadDto = new UploadDto(); // 就是一个格式化返回信息的类。
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        // 先判断request中是否包涵multipart类型的数据，
        if (multipartResolver.isMultipart(request)) {
            try {
                // 
                String fileId = service.saveFile(file);
                uploadDto.setMessage("上传成功!");
                uploadDto.setCode(0);
                uploadDto.setFileId(fileId);
            } catch (Exception e) {
                e.printStackTrace();
                uploadDto.setMessage("上传失败!");
                uploadDto.setCode(-1);
            }
        }
        return uploadDto;
    }

总结

不同的上传方式需要配合不同的接收方式。同一个项目尽量使用同一套规范进行封装。这里使用ajax作为客户端上传，其它平台遵循http协议的情况下可以使用同一个上传接口。

参考

1. 廖雪峰javascript教程
2. Sending multipart/formdata with jQuery.ajax