Question

似乎Gmail刚刚启动此功能，并且它不需要您安装任何插件等。

它适用于Firefox和Chrome，但不适用于IE。

Answer 1

使用dropzonejs。

这是一个支持文件丢弃的轻量级库，只需将dropzone类添加到表单元素即可。它使用HTML5处理文件，甚至显示放入其中的图像的预览。在不兼容的浏览器中，它会回退到简单的文件上载表单。另外：它看起来不错。

看看吧！

免责声明：我写了这个库。

Answer 2

在所有这些链接中断之前，让我们总结一个示例 =）

使用HTML5 DnD API拖放时，桌面/文件浏览器中的文件会进入浏览器：

drop事件回调对象具有dataTransfer.files属性
这是HTML5 File API FileList对象
，其中包含文件API File个对象。

从那里开始，使用File API进行上传，这已经在很多其他地方得到了解决。

完整示例：

<div id="file-drop" style="border:1px dashed black; height:300px; width:300px;">Drop files here!</div>
<script>
  var file_drop = document.getElementById('file-drop');
  file_drop.addEventListener(
    'dragover',
    function handleDragOver(evt) {
      evt.stopPropagation()
      evt.preventDefault()
      evt.dataTransfer.dropEffect = 'copy'
    },
    false
  )
  file_drop.addEventListener(
    'drop',
    function(evt) {
      evt.stopPropagation()
      evt.preventDefault()
      var files = evt.dataTransfer.files  // FileList object.
      var file = files[0]                 // File     object.
      alert(file.name)
    },
    false
  )
</script>

Fiddle

这将提醒文件basename（无法从文件API获取路径）。

顺便说一句，获得File对象的另一种基本方法是通过.files的{{1}} IDL属性。对于小屏幕而言，此方法比DnD更友好，在DnD中，您需要在相对较佳的位置同时打开两个窗口。不幸的是，目前似乎无法拖放到input type=file：drag drop files into standard html file input

来源：http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 3

它正在使用HTML5拖放API。

http://html5doctor.com/native-drag-and-drop/

Answer 4

他们正在使用HTML5的一项功能。 IE不支持HTML 5或标准或......

Here is a blog可以很好地解释拖放问题。

Answer 5

HTML5拖放API可以在最流行的浏览器中使用，就像其他人所说的那样。

Google Gears（一个“插件”）可以为旧浏览器（FF和IE）添加拖放功能（我知道Google Wave至少在Google Wave开发预览中使用了齿轮）。请注意gears will not be supported forever

Answer 6

我想你正在寻找这个http://www.plupload.com/

如何将文件附件拖放到浏览器中？

6 个答案: