使用 webkitGetAsEntry 的 Javascript 拖放文件上传问题

Question

Example JSFiddle here

上面的 fiddle 是我的代码的精简版本，只是为了突出问题(尝试将文件拖放到窗口中)。基本上，webkitGetAsEntry().file() 不允许我写入其范围之外的任何内容，但是，如果您拖动文件然后手动执行 console.log(fileList)(但是，jsfiddle 阻止了这个)它工作正常。任何帮助将不胜感激，谢谢!

上传.js

function Upload() {
_this = this;
this.fileList = 'no file';

this.fire = function(droppedFiles) {
    for(i = 0; i< droppedFiles.length; i++) {
        this.buildFileSource(droppedFiles[i].webkitGetAsEntry());
    }
    //This returns the original string
    console.log(this.fileList);
}

this.buildFileSource = function(item, path) {
    if(item.isFile) {
        item.file(function(file) {
            _this.fileList = 'file';
            //This works as expected
            console.log(_this.fileList);
        } );
    }
};
}

//Event listeners for dragging  
$(document).ready(function() {
    window.addEventListener("dragenter", function(e) {
            event.stopPropagation();
            event.preventDefault();
            return false;
        }, false);
        window.addEventListener("dragover", function(e) {
            event.stopPropagation();
            event.preventDefault();
            return false;
        }, false);
        window.addEventListener("dragleave", function(e) {
            event.stopPropagation();
            event.preventDefault();
            return false;
        }, false);

    window.addEventListener("drop", function(e) {
        e.stopPropagation();
        e.preventDefault();

        upload = new Upload;
        upload.fire(e.dataTransfer.items);
        return false;
    }, false);
});

Answer 1

console.log(_this.fileList); 在你的 fire 函数被调用之前 fileList 在 中被修改buildFileSource 方法。这是因为 FileEntry(您的 item 变量)上的 file 函数是异步函数。实际上，对 buildFileSource 的每次调用也是异步的。在 MDN 上查找有关 Entry 接口(interface)及其两个子接口(interface)的更多详细信息:FileEntry 和 DirectoryEntry。

请注意，使用 webkitGetAsEntry 方法意味着您的代码只能在 Chrome 21+ 上运行，因为此方法非常特定于 Chrome(由于前缀)和底层概念( Entry 对象)属于Filesystem API，目前只有Chrome 21+支持。