如何使用JavaScript添加到现有的dataTransfer.files对象?

bsxbgnwa  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(186)

我正在创建一个拖放文件上传区。当我一次上传多个文件时,它可以工作,但我需要它能够支持多个阶段的上传。我知道下面的问题是我每次都在设置文件,但是我不知道每次调用该方法时将更多文件添加到dFiles的正确方法

var dFiles;
    //var dFiles = []
    var holder = document.getElementById('holder');
    holder.ondrop = function (e) {
        e.preventDefault();
        dFiles = (e.dataTransfer.files);
        //dFiles.push(e.dataTransfer.files);
   }

我尝试将dfiles初始化为一个空数组并添加文件(在上面注解掉)。后来,这造成了一个数据类型不匹配错误时,我正在阅读文件数据

for (var i = 0; i < dFiles.length; i++) {
    reader = new FileReader();
    reader.readAsDataUrl(dFiles[i]); //error
}
cwdobuhd

cwdobuhd1#

e.dataTransfer.fileslist of files
您必须将每个文件单独添加到dFiles

var files = e.dataTransfer.files;

for (var i = 0, l = files.length; i < l; i++) {
    dFiles.push(files[i]);
}

ES6方式:

dFiles.push(...e.dataTransfer.files);

相关问题