XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。
先来看一下FormData都有哪些方法,其实严格意义来说FormData本身并没有属性和方法,其操作方法均在原型当中。
上图即可看出具体的方法锁拥有的方法。
append方法和set都可以向FormData中添加数据,不同的是set方法是直接向FormData中添加,覆盖掉之前的数据,append方法是向其追加数据,即name对应的value将成为一个数组,get方法的作用是根据name获取value,但是如果value值如果是数组的话只会取出第一个数据,全部取出需要调用getAll方法。delete方法是删除name,forEach是循环遍历,has是判断是否包含此name。
var fd = new FormData();
fd.append("websit","http://www.oecom.cn")
fd.set("name","落帆亭")
fd.append("name","haha")
fd.get('websit')//输出http://www.oecom.cn
fd.get('name')//输出:落帆亭
fd.getAll("name")//输出:["haha"."落帆亭"]
fd.has("name")//true
使用FormData对象发送文件
通过FormData可以实现异步上传文件。下面请看代码
HTML部分
<form action="">
<label for="">
姓名: <input type="text" name="name">
</label>
<label for="">
文件:<input id="file" type="file" name="file">
</label>
<label for="">
<input type="button" value="保存">
</label>
</form>
JS部分
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
// 文件元素
var file = document.querySelector('[type=file]');
// 通过FormData将文件转成二进制数据
var formData = new FormData();
// 将文件转二进制
*****注意2******
formData.append('upload', file.files[0]);
*****注意1******
var xhr = new XMLHttpRequest;
xhr.open('post', '/upload');
// 监听上传进度
xhr.upload.onprogress = function (ev) {
// 事件对象
// console.log(ev);
var percent = (ev.loaded / ev.total) * 100 + '%';
console.log(percent);
progress.style.width = percent;
}
xhr.send(formData);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
//
}
}
}
上述XL码是通过手写xhr来实现发送,当然也可以使用jQuery来实现异步上传文件,但是需要注意的是填入数据是填入的是DOM对象而不是jQuery对象。
//需要注意的点
var file = $("#file")[0]
formData.append('upload', file.files[0]);
$.ajax({
url: '/upload',
type: 'POST',
data: formdata, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success:function (data) { //成功回调
console.log(data);
}
});
由于其兼容IE10及以上浏览器,所以如果开发的是自用后台管理系统类项目,则可以放心使用,如果开发的项目面向客户则需要考虑一下其他替代方式了。