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

最新推荐文章于 2024-03-07 10:30:35 发布

前端架构师

最新推荐文章于 2024-03-07 10:30:35 发布

阅读量823

点赞数 1

本文链接：https://blog.csdn.net/bbqq1314/article/details/105026333

版权

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