Question

Example JSFiddle here

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

upload.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。这是因为file（您的FileEntry变量）上的item函数是异步函数。实际上，每次调用buildFileSource也是异步的。在Entry界面上查找更多详细信息，这是MDN上的两个孩子：FileEntry和DirectoryEntry。

请注意，使用webkitGetAsEntry方法意味着您的代码仅适用于Chrome 21+，因为此方法非常特定于Chrome（由于前缀）和基础概念（Entry个对象）属于Filesystem API，目前只支持Chrome 21+。

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

1 个答案: