将form表单提交文件修改为ajax提交

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

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

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

前端jsp：

<%-- <form name="downloadForm" id="downloadForm" action="" method="post"  target="_self"  enctype="multipart/form-data" > --%>

<div>

     <jsp:include page="../csrf.jsp"/>

           <input type="file" style="font-size:14px;color:inherit;"size="30" class="input1 js-upload" name="myfiles"  id="myfiles" multiple="multiple" contenteditable="false" onChange="checkFile(this,'file')" />

            <font id="imgStyle">(请上传格式为"jpg,png,pdf"的附件,文件大小不得超过10MB)</font>

            <br />

            <!-- <input   type="button" class="button2" value= "上传定标审批表"  id="uploading"  onclick="uploadRecord()"/> -->

            <div class="confirmOaBox" style="padding:30px;">

                 <input name="submitExamine" type="button" id="button_a" value="" class="button2" onclick="提交的方法();"/>

           </div>

</div> 

<!-- </form> -->

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

js代码：

//验证上传的图片文件格式 2020-10-11
function 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，两处标红的的属性名必须是一样的，否则会报错！这个问题本来一次能成功的我耽误了挺长时间才找到的原因。

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