使用XHR上传文件要不要了解一下？

上传文件 我们通过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 < len) { data.append("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对象即可。 扫码加群，每日更新一篇前端技术文章一起成长。

预览