html中包含htnl文件,使用本地htnl5文件进行HTML5拖放以进行目录上载[重复](HTML5 drag and drop for directory upload using local h...

使用本地htnl5文件进行HTML5拖放以进行目录上载[重复](HTML5 drag and drop for directory upload using local htnl5 file [duplicate])

我有一个问题：以下代码perfeclty适用于HTTP服务器，但不适用于本地html5文件(FILE：///)。

知道为什么吗？ 有任何建议允许文件拖放目录上传？

CSS：

#drop_zone {

font-size: 30px;

text-align: center;

width: 100%;

height: 200px;

border: 1px solid black;

}

HTML：

Drop files here

使用Javascript：

function error(e) {

console.log('error');

console.log(e);

}

function error_from_readentries(e) {

console.log('error_from_readentries');

console.log(e);

}

function traverseFileTree(item, path) {

path = path || "";

if (item.isFile) {

// Get file

item.file(function(file) {

console.log("File: " + path + file.name);

}, error);

} else if (item.isDirectory) {

// Get folder contents

var dirReader = item.createReader();

dirReader.readEntries(function(entries) {

for (var i=0; i

traverseFileTree(entries[i], path + item.name + "/")

}

}, error_from_readentries);

}

}

function handleFileSelect(evt) {

evt.stopPropagation();

evt.preventDefault();

var items = evt.dataTransfer.items;

for (var i = 0; i < items.length; i++) {

var item = items[i].webkitGetAsEntry();

if (item) {

traverseFileTree(item);

}

}

}

function handleDragOver(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy';

}

//Setup the dnd listeners.

var dropZone = document.getElementById('drop_zone');

dropZone.addEventListener('dragover', handleDragOver, false);

dropZone.addEventListener('drop', handleFileSelect, false);

非常感谢！

I have a problem: the following code perfeclty works from an HTTP server, but not from a local html5 file (FILE:///).

Any idea why? Any suggestion to allow a file drag and drop for directory upload?

CSS:

#drop_zone {

font-size: 30px;

text-align: center;

width: 100%;

height: 200px;

border: 1px solid black;

}

HTML:

Drop files here

Javascript:

function error(e) {

console.log('error');

console.log(e);

}

function error_from_readentries(e) {

console.log('error_from_readentries');

console.log(e);

}

function traverseFileTree(item, path) {

path = path || "";

if (item.isFile) {

// Get file

item.file(function(file) {

console.log("File: " + path + file.name);

}, error);

} else if (item.isDirectory) {

// Get folder contents

var dirReader = item.createReader();

dirReader.readEntries(function(entries) {

for (var i=0; i

traverseFileTree(entries[i], path + item.name + "/")

}

}, error_from_readentries);

}

}

function handleFileSelect(evt) {

evt.stopPropagation();

evt.preventDefault();

var items = evt.dataTransfer.items;

for (var i = 0; i < items.length; i++) {

var item = items[i].webkitGetAsEntry();

if (item) {

traverseFileTree(item);

}

}

}

function handleDragOver(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy';

}

//Setup the dnd listeners.

var dropZone = document.getElementById('drop_zone');

dropZone.addEventListener('dragover', handleDragOver, false);

dropZone.addEventListener('drop', handleFileSelect, false);

Thanks a lot!

原文：https://stackoverflow.com/questions/18106954

更新时间：2019-12-26 03:21

最满意答案

原因：使用FILE：//协议时，看起来readEntries会引发错误。 webkit或Chrome中的错误。 建议：遗憾的是没有。

我正在使用Chrome(版本28.0.1500.95)

Why: Looks like readEntries raises an error when using the FILE:// protocol. Bug in webkit or Chrome. Suggestion: unfortunately no.

I am using Chrome (Version 28.0.1500.95)

相关问答

假设您正在遍历已拖放的目录树并上传( put或mput ftp命令)每个子目录中的所有文件，则必须向远程系统发出ftp mkdir和cd命令。 ftp不会自动执行子树。 Assuming you are traversing the directory tree that was dragged/dropped and uploading (put or mput ftp commands) all the files in each subdirectory, you must issue th

...

删除$ box.bind(“dragleave”，dragLeave); 添加：$ box.bind(“dragover”，dragLeave); 它有魅力。 Remove $box.bind("dragleave", dragLeave); Add this : $box.bind("dragover", dragLeave); it works charms .

原因：使用FILE：//协议时，看起来readEntries会引发错误。 webkit或Chrome中的错误。 建议：遗憾的是没有。 我正在使用Chrome(版本28.0.1500.95) Why: Looks like readEntries raises an error when using the FILE:// protocol. Bug in webkit or Chrome. Suggestion: unfortunately no. I am using Chrome (Versi

...

在flash / flex中无法使用网络应用程序 - 但您可以在空中进行。 这基本上是一个安全问题。 就HTML5而言 - 只有Firefox和Chrome目前支持我知道的HTML5本地拖放事件(Chrome会包含一些其他webkit变体，如safari) Not possible with a web app in flash/flex - but you can do it inside air. It's basically a security issue. As far as HTML5

...

我在文档中找到了答案 https://github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects I have found answer in documentation https://github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects

Silverlight 4支持将文件从文件系统拖放到任何UIElement 。 看到这个博客 但是，这是否适用于在Outlook中启动的拖动我不知道。 我建议你从这个博客中获取样本并构建一个小测试应用程序，看看你是否可以拖动附件。 当然，您仍然需要将TIFF解码为Silverlight可以使用的位图。 Silverlight 4 does support the dragging and dropping of files from the file system to any UIElement

...

我认为你的变量fd的范围有问题。 您可以在$(document).ready(function(){});的范围内定义它$(document).ready(function(){}); 然后期望它在你的函数DragAndDropUpload() 。 这不行。 你应该在函数中传递它。 你也混淆了你的活动。 当用户删除某些内容时，您可以定义一个事件侦听器(用于单击)。 你应该在外面这样做。 我不知道你的其余代码是否正常，因为你没有包含我需要知道的所有内容来回答这个问题。 始终确切地说出您正在使用哪个插

...

发现我做错了什么。 改变这些行： // fetch FileList object

var files = e.target.files || e.dataTransfer.files;

var formData = new FormData($('#upload_logo')[0]);

至： var formData = new FormData();

// fetch FileList object

var files = e.target.files || e.dataTransfer

...

我为事件中的每个文件添加了一个内容数组，在下面的代码中我们需要添加一个控制器来处理数组中的每个文件，并在数据库中使用每个文件的寄存器。 script.

var dropZone = document.getElementById('dropZone');

function allowDrop(e){

e.preventDefault();

}

var files = [];

function drop(e){

...

我已经找到了很多关于如何在html5中执行此操作，并在浏览器调试器中搜索事件变量后，我能够找到我正在寻找的确切内容。 我只是要说这比我想象的要简单得多，因为我花了至少一个小时在网上寻找解决方案。 你要做的是从jquery事件中获取“originalEvent”，它将具有dataTransfer属性。 dataTransfer属性包含一个文件数组，您可以迭代它们(如果存在)，并获取每个文件的name属性(以及lastModified，lastModifiedDate，size和type)。 从dro

...