有人知道如何使用HTML5通过桌面拖放文件实现上传吗？ 我找到了以下参考文献：
Drag and drop file uploading using JavaScript文章指出api已更改并链接到The File Api has changed (2010-09)
但有没有可以在所有平台上运行的解决方案： Firefox ， Chrome 和 Safari ？
非常感谢！
答案 0 :(得分：5)
很抱歉，目前没有可用的跨浏览器解决方案。
当前浏览器实施问题
没有递归文件夹上传 - 事实上，根本没有文件夹上传。虽然这不是一个显示停止，但如果浏览器也不会发送该文件夹中的所有文件，那么允许用户在文件上传输入框中选择文件夹似乎有点愚蠢。
这个浏览器支持文件拖放，但实现很可能是有史以来最糟糕的。为了上传用户删除的文件，我们必须将整个文件读入内存，然后通过Ajax将其发送到我们的服务器。这适用于大约10MB的滴。如果您使用400MB文件尝试相同的操作，请忘记它！
Mozilla开发人员很快 - 他们意识到了之前实现的问题，并创建了一种实现拖放上传的全新方式。 FormData对象是一个新的JavaScript对象，它允许Web开发人员将文件上载直接插入到Ajax请求中，而无需先将文件读入内存。我对此非常兴奋，并迅速下载了Firefox 4，这是第二个测试版。在玩了不到5分钟之后，我强烈反对你不要尝试它。由于缺乏对Firebug的支持，我的系统变得非常不稳定和缓慢，并且开发是一个主要的痛苦。
此浏览器是目前实施中最好的！简单明了，我唯一的抱怨是你不能通过拖放上传文件夹及其内容。
由于Safari就像Google Chrome一样建立在WebKit之上，我希望它也可以正常运行。哇，我错了！我在Safari 4和Safari 5中都尝试过这种方法。在将多个文件拖放到窗口中时，Safari会多次发送第一个文件，而不是发送所有文件。谈论一个主要的错误。为了使它更有趣，如果用户点击放置位置，他们可以使用标准文件选择对话框选择要上载的多个文件 - 并且按预期工作！我等不及Safari来解决这个问题。
说实话，我还没有打算尝试在Internet Explorer中拖放上传。由于缺乏良好的开发工具和不合规的JavaScript引擎，试图支持IE是一种痛苦。由于我无法让所有首选浏览器都能玩得很好，我无法想象Internet Explorer会更接近。
答案 1 :(得分：2)
我会挑衅地看看运行Plupload。它允许出色的浏览器功能，并支持在支持FileReader的HTML5浏览器中拖放多个文件。
所以，举个例子，你没有html 5，它会弃用到flash / gears / silverlight，具体取决于个人安装的内容。
这是兼容性图表： http://www.plupload.com/index.php
它有一个名为droparea的选项：“somediv”，允许您将文件拖入其中并自动提示文件上传。
如果您需要任何帮助，请与我们联系。
答案 2 :(得分：0)
这是一个简单的例子。如果将图像拖到红色div上，则会将图像附加到正文。我已经确认它适用于IE11，Chrome 38和Firefox 32.有关更详细的说明，请参阅此Html5Rocks文章。
<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
<script>
var dropZone = document.getElementById('dropZone');
// Optional. Show the copy icon when dragging over. Seems to only work for chrome.
dropZone.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
// Get file data on drop
dropZone.addEventListener('drop', function(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // Array of all files
for (var i=0, file; file=files[i]; i++) {
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function(e2) {
var img = document.createElement('img');
img.src= e2.target.result;
document.body.appendChild(img);
}
reader.readAsDataURL(file);
} } });
</script>