利用formData，在使用form表单提交参数(或者文件)时，处理回调函数

迷南。 2022-06-11 04:58 245阅读 0赞

> 我们通常在使用传统的form表单进行传参或者上传文件时，只要提交了参数，会有以下两个问题:  
> 1、无法处理回调函数  
> 2、页面会刷新

*  1、拿一个很简单的图片做例子，如图  
    ![这里写图片描述][SouthEast]

这里其实也有两种情况：  
1）这里有参数，也有文件上传，很明显，这里的文件上传和参数提交，需要分开请求，但是文件上传这里也是一个表单，如果使用传统的表单提交，点了开始上传后，这个页面就会刷新，虽然文件上传过去了，但给人的体验很不好。  
2）当这里是一个弹出层，例如layer.open打开的，如果点击开始上传后，页面刷新，这个弹窗就会关闭，那其他参数就无法正常提交了。

*  2、解决如上问题的办法：  
    使用jquery的一个formData的对象，使用如下：

这里的代码就是上面的那张图的，可以看出，这里有一个form，用于文件上传，这里使用的是springmvc的MultipartFile，我另一篇文章有写这个的使用方法。  
下面我们写js实现异步文件上传：

$('#fileUpload').click(function(){ 
        //初始化FormData函数，传入的是一个form
        var formData = new FormData($("#addBillForm")[0]);
        //formData.append('sgid',_sgId); 添加表单之外的参数
        $.ajax({
              url: '${path}/bill/uploadFile',
              type: 'POST',  
              data: formData,  
              cache: false,  
              contentType: false,  
              processData: false,  
              success: function (data) { 
                  layer.msg('上传成功',{icon: 1});
    
              },  
              error: function (data) {  
                  layer.msg("上传失败",{icon: 5});
              }  
         })
    })

如上，当我们选择文件后，点击上传，页面也不会刷新，而且文件也上传成功了，这样我们可以继续处理我们这个页面的其他业务了。

ps： 当我们需要提交form之外的参数，可以使用

formData.append('sgid',_sgId);

[SouthEast]: /images/20220611/f1dc9bcb1baf4eff8497407bd849b8be.png