使用FormData向后台发送文件及数据

FormData的主要用途有两个：

1. 将form表单元素的 name 与 value 进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
2. 异步上传文件

接下来直接上代码吧

//新增数据
function insertInfo() {
    //1.创建一个空的FormData对象
    var formData = new FormData();
    //2.获取所有的值
    var file = $('#file')[0].files[0];//获取文件对象，传到后台为二进制文件
    var storeName = $("#storeName").val();
    var categoryId = $("#categoryId").val();
    var bindPhone = $("#bindPhone ").val();
    var areaId = $("#areaId ").val();
    var address = $("#insertAddress").val();
    var brief = $("#brief").val();
    //3.利用FormData对象的append("name","value")方法添加值
    //（第一个参数为name要与后台实体相对应,第二个参数为value值）
    //如果file有值（如果没有上传文件，前端接受为undefined，到后台会报错）
    if (file) {
        formData.append('file', file); //添加图片信息的参数
    }
    formData.append('storeName', storeName);
    formData.append('categoryId', categoryId);
    formData.append('bindPhone', bindPhone);
    formData.append('areaId', areaId);
    formData.append('address', address);
    formData.append('brief', brief);

    $.ajax({
        type: "post",
        url: "${base}/xunFeng/updateInfo",
        data: formData,
        dataType: 'json',
        cache: false,//上传文件不需要缓存
        processData: false,// 告诉jQuery不要去处理发送的数据
        contentType: false,// 告诉jQuery不要去设置Content-Type请求头
        async: false,//同步发送请求
        success: function(dataString) {
            console.log("添加完成" + dataString);
            // dataString=JSON.parse(dataString);
            if (dataString.errorcode == "1000") {
                //清空表单
                $("#insertFormInfo")[0].reset();
            } else {
                layer.alert(dataString.errormsg);
            }
        },
        error: function(xhr, errorType, error) {
            layer.alert('加载失败：' + error);
        }
    });
}