好久没有记录工作中的出现的问题了，不过最近客户提出了新的需求，正好弥补了一下我的短板，学到了新的知识。

周一接到客户电话，要求完善上周写的某个功能--就是同时上传多个图片，并通过接口程序传到第三方系统。上周的修改由于是同事告诉我的需求，并不是很明确，所以需要重新修改一下。

客户提的需求是，将原来后台生成的文件直接传到第三方的功能修改为页面上传文件（图片或PDF），所以需要修改的地方比较多；例如，将原来后台生成PDF的功能代码去掉，在页面添加上传文件的代码，js 中增加上传文件的判断等等。今天主要说的就是在融合代码时，将原来的form表单提交文件修改为ajax提交后台数据的方式。代码如下：

前端jsp：

<%--  --%>
                            (请上传格式为"jpg,png,pdf"的附件,文件大小不得超过10MB)            
            <!--  -->            
                            
 <!--  -->

从上边代码可以看出将原来的form表单改成了普通提交方式。

js代码：

//验证上传的图片文件格式 2020-10-11function checkFile(obj,type){    var fileStyle=obj.value.substring(obj.value.lastIndexOf(".")+1);    if(type == 'file'){            if(fileStyle !='jpg' && fileStyle != 'png' &&fileStyle!='pdf'){                scscms_alert("请上传格式为'jpg,png,pdf'的文件",'warn');                $("#myfiles").val("");            }        }    //获取文件大小    var fileSize = obj.files[0].size     if(fileSize>10000*1024){        scscms_alert("请上传小于10M的文件",'warn');        $("#myfiles").val("");    } }

以上代码为验证上传文件的方法

提交方法的代码：

var myfiles = $("input[name='myfiles']").val();    if(myfiles ==null || myfiles == ''){        scscms_alert("请先上传******文件!",'warn');        return false;    }var form = new FormData();    //获取需要传到后台的文件    var files = document.querySelector('.js-upload').files    var num = files.length    for (var i = 0; i<num; i++) {        form.append("file", files[i], files[i].name); // 文件对象    };    //需要提交到后台的其他数据    //form.append('multilevelExamine',2);    //form.append('evaluaOpinion',evaluaOpinion);    //form.append('CSRFToken',"");    scscms_alert('提交后数据不可修改，确定提交吗?','confirm',function(){        $('#RotatingLoading').show();        //保存数据        $.ajax({              type: "POST",              url: 后台地址,              data:form,              cache: false, // 不缓存              processData: false, // jQuery不要去处理发送的数据              contentType: false, // jQuery不要去设置Content-Type请求头              dataType:'json',              success: function(msg){                  if(msg.result==1){                      scscms_alert('提交成功!','success',function(){                          location.reload();                      });                      }else{                      scscms_alert('操作失败!'+msg.resultTxt,'warn',function(){                      });                      }               }        })    },function(){        $('#RotatingLoading').hide();        console.log('取消')    });

以上是ajax提交后台的代码

后台代码：

@ResponseBody    @RequestMapping(value = "")    public void updateMultilevelExamineOA(@RequestParam("file") MultipartFile[] myfiles,String evaluaOpinion,            HttpServletRequest request, RedirectAttributes attr, HttpSession session, HttpServletResponse response)                    throws Exception {        中间内容照常，业务代码，与本次修改无关。}

以上就是form表单上传文件修改为ajax方式上传文件的改造代码，主要是为了迎合业务上的需求，同时满足与当前代码的高度融合。中间出现问题的地方没有时间截图，可以直接使用上述代码一次成功。

需要注意的是：提交方法的代码中form.append("file", files[i], files[i].name)和后台代码中@RequestParam("file") MultipartFile[] myfiles，两处标红的的属性名必须是一样的，否则会报错！这个问题本来一次能成功的我耽误了挺长时间才找到的原因。

最后感谢公司前端的同事帮忙一起处理的这个问题，这个项目不是前后端分离的，友情协助！