利用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);