使用XHR上传文件要不要了解一下?
2021-04-03 05:27
阅读:682
上传文件 我们通过File API 能够访问到文件内容,然后把文件内容放到send()方法中,再通过POST请求,的确很容易就能实现上传。但这样做传递的是文件内容,因而服务器还得收集提交的内容,然后保存到另外一个文件中。其实,更好的做法是以表单提交方式来上传文件。
表单方式上传?没错!formData类型做这个很容易,分分钟几千万上下啦。 首先,要创建一个FormData对象,通过它调用append()方法传入相应的File对象作为参数。然后,再把FormData对象传递給XHR的send()方法,结果与通过表单上传一摸一样。
let droptarget = document.getElementById(‘droptarget‘);
function handleEvent(event) {
var info = ‘‘,
output = document.getElementById(‘output‘),
data,
xhr,
files,
i,
len;
EventUtil.preventDefault(event);
if(event.type == ‘drop‘) {
data = new FormData();
files = event.dataTransfer.files;
i = 0;
len = files.length;
while(i "file" + i, files[i]);
i ++;
}
xhr = new XMLHttpRequest();
xhr.open("post","FileUpload.php",true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
alert(xhr.responseText);
}
};
xhr.send(data);
}
}
EventUtil.addHandler(droptarget, ‘dragenter‘, handleEvent);
EventUtil.addHandler(droptarget,‘dragover‘,handleEvent);
EventUtil.addHandler(droptarget, ‘dragover‘,handleEvent);
我们这里创建一个formData对象,与每个文件对应的键分别是file0,file1,file2,这样的格式。注意不用写额外的代码,只要传入File对象即可。 扫码加群,每日更新一篇前端技术文章一起成长。
评论
亲,登录后才可以留言!