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

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

• 1、拿一个很简单的图片做例子，如图
  

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

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

<div id="setting-layer" style="position:relative;height:100%;overflow:hidden;">
    <div class="sug-box">
        <p>选择部门:<input id="orgTree"/><p/>
        <p>处理原因:</p><textarea id="sug"></textarea>
    </div>'
    <form id="addBillForm" method="post" enctype="multipart/form-data">
        <div class="file-box">'
            <span>文件上传</span><b class="file-path"></b>
            <input type="file" id="order-upload" name="file" onchange="getFilePath(this)">
            <label id="label-choose" for="order-upload">选择文件</label><button class="btn-upolad" id="fileUpload" type="button">开始上传</button>
        </div>
    </form>
    <button class="layui-btn" id="btn-sure">确定</button>
</div>

这里的代码就是上面的那张图的，可以看出，这里有一个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);