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

Question

似乎Gmail刚刚启动此功能,它不需要您安装任何插件等.

它适用于Firefox和Chrome,但不适用于IE.

Answer 1

使用dropzonejs.

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

看看它!

免责声明:我写了这个库.

Answer 2

在所有这些链接断开之前,让我们总结一个例子 =)

使用HTML5 DnD API进行拖放时,将桌面/文件浏览器中的文件导入浏览器:

• 该drop事件的回调对象有一个dataTransfer.files属性
• 这是一个HTML5文件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>

小提琴.

这将提醒文件basename(无法从文件API获取路径).

顺便说一句,你可以获得File对象的另一种基本方法是通过一个.filesIDL属性input type=file.对于小屏幕而言,此方法比DnD更友好,在DnD中,您需要在相对较佳的位置同时打开两个窗口.不幸的是,似乎目前它是不可移植的拖放到input type=file:拖放文件到标准的HTML文件输入

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

Answer 3

它使用 HTML5 拖放 API。

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