3

此处为示例 JSFiddle

上面的小提琴是我的代码的精简版本，只是为了突出问题（尝试将文件拖放到窗口中）。基本上，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);
});
4

1 回答 1

3

console.log(_this.fileList);在您的fire函数被调用之前fileList在方法中被修改buildFileSource。这是因为（您的变量）file上的函数是异步函数。实际上，每次调用也是异步的。在界面上寻找更多细节，它是两个孩子：和MDN。 FileEntryitembuildFileSourceEntryFileEntryDirectoryEntry

请注意，使用该webkitGetAsEntry方法意味着您的代码只能在 Chrome 21+ 上运行，因为此方法非常特定于 Chrome（由于前缀），并且底层概念（Entry对象）属于文件系统 API，只有 Chrome 21+ 支持此时。

于 2013-06-09T22:44:41.363 回答