一、问题

在现实场景中，会有很多小伙伴采用ajaxfileupload这个控件取异步上传文件，它的原理是在源码中构造一个iframe上传，如果上传组件本身就在一个iframe中，上传文件的时候，ajaxfileupload源码中又构造一个iframe，这样上传的时候就会触发浏览器的同源策略，造成跨域，就算两个iframe本身处于同一个域名下，也会存在跨域，那么怎么解决呢？

二、解决方法

采用FormData上传即可解决！！！！

1、jsp页面代码：

<input id="file" type="file" hidden name="file" multiple="multiple">
<label class="blue-btn" href="javascript:" onclick="openFile();"><span class="icon-add"></span>选择文件</label>

multiple="multiple"：表示可以多文件上传

2、js代码：

//打开上传文件窗口
function openFile(){
    $("#file").click();
}

//上传文件

var formData = new FormData();
for (var i=0;i<$("#file")[0].files.length;i++){
    formData.append("files",$("#file")[0].files[i])
}
formData.append("businessType",param.businessType);
formData.append("pkid",param.pkid);
formData.append("fileNames",param.fileNames);
formData.append("fileReNames",param.fileReNames);
$.ajax({
    url : "/uploadAttachment",
    type:"post",
    data:formData,
    //十分重要，不能省略
    cache: false,
    processData: false,
    contentType: false,
    success: function (rslt) {
    if (rslt.resCode=="000000") {
        alert(rslt.resCode);
    }else{
        layer.msg(rslt.resMsg, {icon : 2, time : 2000});
    }
}
formData.append("businessType",param.businessType)：上传文件的同时附带参数

3、后台代码：

@RequestMapping("/uploadAttachment")
@ResponseBody
public BasePageResponse upload(@RequestParam("files") List<MultipartFile> files, HttpServletRequest request) {
    return null;
}

此处files一定要和formData.append("files",$("#file")[0].files[i])中的key一致！！

好啦，完美解决，可以抛弃ajaxfileupload.js了~~~~