关于formData对象使用中的一些总结

一、jquery的 $(“#id“)和原生js的document.getElementById(“id“)区别:

$("#id")：获取的其实是一个jquery封装的数组对象，
$("#id")[0]：获取js原生的dom对象，
document.getElementById(“id”)：原生的js对象。

$("#id")[0] = document.getElementById(“id”)

二、 直接打印console.log（formdata）为空

let formdata = new FormData($("#id")[0]);
//错误打印方式
console.log(formdata)   //为空{}
//正确打印方式
console.log(formdata.get('key值'))  //或getAll('key值')

三. 使用formData上传数据时，Ajax的属性cache、processData、contentType设置

var formdata = new FormData(); //创建一个新的FormData对象
	$.ajax({
	type:'post',
	url:'url',
	dataType: 'json',
	contentType:false,  //发送的数据格式, 默认值：application/x-www-form-urlencoded
	processData:false,    //不处理数据，默认是true
	cache:false,   //不缓存
	data:formdata,
	success:function(res){
		console.log('success');
    }
})

四、serialize( )方法和FormData对象的区别：

1. serialize( )方法

serialize( )是JQuery方法，必须依赖jQuery，可序列化表单值创建 URL 编码文本字符串，就是将表单数据以字符串的形式返回，在ssm框架中可通过对象直接接收数据。

缺点：只能序列化一般数据，文件上传则无法序列化，不支持文件二进制流提交。

2.FormData对象

FormData是HTML5对象，目前可兼容大多主流的浏览器，但不兼容低版本IE浏览器。

与普通的Ajax相比，使用FormData 的最大优点就是可以异步上传二进制文件。

通过ajax异步提交表单数据，可实现文件上传

var formser = new FormData($('#id')[0]); //获取表单的参数
formser.append("key",value) //可增加请求的参数

var formser=$('#id').serialize();
// 注意：serialize只能序列化表单中的数据 ，比如文本框等input  select等的数据，
// 但是对于文件，比如文件上传，无法实现 ，需要使用FormData

那么生成formData对象的时候为什么要在后面添加[0] ？？
继续往下看

四、总结一下FormData注意点

1. FormData对象的操作方法，全部在原型中，自己本身没任何的属性及方法。
   
2. new FormData的参数是一个DOM对象，而非jQuery对象

 let formData = new FormData($("#id")[0])

因为new FormData的参数需要一个HTMLElement类型的数据，而jQuery得到的是个HTMLElement的集合基础上的封装后的对象，哪怕只有一个元素。所以需要用[0]取其第一个元素。
这就回答了为啥 new FormData($("#id")[0]) 要这样写了

3. ajax请求的时候属性设置

$.ajax({
    url: '后端接口',
    type: 'POST',
    data: formdata,                   // 上传formdata封装的数据
    dataType: 'json',                
    cache: false,                      // 不缓存
    processData: false,                // jQuery不要去处理发送的数据
    contentType: false,                // jQuery不要去设置Content-Type请求头
    success:function (data) {           //成功回调
        console.log(data);
    }
});

五、其他补充

1. jQuery的参数序列化方法serialize()

序列表表格内容为字符串，用于 Ajax 请求。
$(“form”).serialize( )

2.base64的图片url数据转换为Blob文件格式

/**
 * 将以base64的图片url数据转换为Blob文件格式
 * @param urlData 用url方式表示的base64图片
 */
function convertBase64UrlToBlob(urlData) {
    var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for(var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
        type: 'image/png'
    });
}