一、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注意点
- FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。
- new FormData的参数是一个DOM对象,而非jQuery对象
let formData = new FormData($("#id")[0])
因为new FormData的参数需要一个HTMLElement类型的数据,而jQuery得到的是个HTMLElement的集合基础上的封装后的对象,哪怕只有一个元素。所以需要用[0]取其第一个元素。
这就回答了为啥 new FormData($("#id")[0]) 要这样写了
- 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'
});
}