webkitGetAsEntry的Javascript拖放文件上传问题

Javascript drag and drop file upload issue with webkitGetAsEntry

本文关键字:问题 文件 拖放 Javascript webkitGetAsEntry      更新时间:2023-09-26

示例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);
});

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

请注意,使用webkitGetAsEntry方法意味着你的代码将只在Chrome 21+上工作,因为这个方法是非常具体的Chrome(由于前缀)和底层概念(Entry对象)属于文件系统API,只有Chrome 21+支持。