JavaScript使用FormData数据交互

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chenbetter1996/article/details/84674090

描述

很多时候提交文件到后台可以一边是使用form表单，而且encrypt要设置为multipart二进制流。
而如果使用ajax交互，给后台发送图片文件的话，可以使用内置的FormData对象。
简单好用

使用

$(".post_btn")[0].onclick = function() {
    // 设置要提交的店铺id
    $("input[name='id']").val(localStorage.getItem("storeId"));

    var formData = new FormData();
	formData.append("id", localStorage.getItem("storeId"));
	formData.append("name",  $("input[name='name']").val());
    formData.append("address",  $("input[name='address']").val());
    formData.append("introduction",  $("textarea[name='introduction']").val());
    // 图片的
    formData.append("image",  $("input[name='image']")[0].files[0]);

    // 发送formDate
    $.post({
	    url: "/updateStore",
		catch: false,
		data: formData,
		processData: false,
		contentType: false,
		success: function (data) {
			if (data == "success") {
				alert("修改成功");
			}
        },
		error: function (data) {
			console.log("失败");
			alert("异常-失败");
        }
    })
};

FormData对象也是类似Map一样采用key-value方式存储，可以存储文件。
ajax交互的data填写FormData对象即可。
此外以下三个属性必须写，包包装数据无缓存直接发送
catch: false,
processData: false,
contentType: false