FormData 对象的使用
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。
你可以自己创建一个FormData对象,然后调用它的append()方法来添加字段,像这样:
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"
// HTML 文件类型input,由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
注意:字段 “userfile” 和 “webmasterfile” 都包含一个文件. 字段 “accountnum” 是数字类型,它将被FormData.append()方法转换成字符串类型(FormData 对象的字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File,则会被转换成字符串类型。
上面的示例创建了一个FormData实例,包含"username", “accountnum”, “userfile” 和 "webmasterfile"四个字段,然后使用XMLHttpRequest的send()方法发送表单数据。字段 “webmasterfile” 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob,继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。
来源:MDN
最终效果如下:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>upload文件上传</title>
<style>
.box{height:20px;width:200px;margin-top:20px;}
#progress{background:red;height:20px;border:1px solid #ccc;width:0;}
</style>
</head>
<body>
<h2>请选择要上传的文件:</h2>
<input type="file" id="file">
<div class="box">
<div id="progress"></div>
</div>
<h1 style="color:yellow;"></h1>
</body>
<script>
function $(select){
return document.querySelector(select);
}
$("#file").onchange = function(ev){
let file = ev.target.files[0]; // 获取file对象
let formData = new FormData(); // 新建formData对象
formData.append('file', file); // 将file添加到formData传到后端
let xhr = new XMLHttpRequest(); // 新建ajax异步对象
xhr.open('post', '/'); // 打开ajax
// 监听ajax对象事件状态
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
$('h1').innerText = '上传成功!';
}
}
// 监听文件上传进度
xhr.upload.onprogress = function (ev){
if(ev.lengthComputable){
console.log(1);
let progress = ev.loaded/ev.total *100;
$('#progress').style.width = progress + '%';
$('#progress').innerText = progress + '%';
}
};
xhr.send(formData); // 发送ajax请求将formData对象发送过去
}
</script>
</html>