webkitGetAsEntry的Javascript拖放文件上传问题
Javascript drag and drop file upload issue with webkitGetAsEntry
示例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
接口的更多细节,以及它的两个子接口:FileEntry
和DirectoryEntry
。
请注意,使用webkitGetAsEntry
方法意味着你的代码将只在Chrome 21+上工作,因为这个方法是非常具体的Chrome(由于前缀)和底层概念(Entry
对象)属于文件系统API,只有Chrome 21+支持。
相关文章:
- 关于引入外部javascript文件的问题&css通过https
- Javascript,文件输入和FormData问题
- Node.js服务器问题-已添加“/"在浏览器中查找文件时
- Express Routes-多个文件的问题
- 使用ajax在html中加载html文件时出现的问题
- 尝试从csv文件中检索单个值时出现问题
- 在javascript中检查文件扩展名的问题
- Ruby on Rails 4:在 Rails Web 应用程序中添加 Javascript 文件时遇到问题
- 使用nodejs和id3打开文件时出现问题
- 将.js文件和jquery链接到html页面时出现问题
- mongodb用户配置文件添加输入时出现问题
- 在androidwebview中为本地文件创建脚本标记时出现问题
- SAPUI5绑定问题:json文件中维护的列表项链接不起作用
- 需要文件时出现问题
- 加载本地json文件问题
- 外部JavaScript文件问题
- 我的网站加载出现问题.这是一个嵌入到index.html中的.SWF文件
- PHP文件的权限问题
- 调用外部javascript文件时出现问题
- AngularJS:图片上传+文件阅读器预览.控制器、指令和作用域之间的绑定出现问题