如何將文件附件拖放到瀏覽器中？

Question

看起來Gmail剛剛啓動此功能，並不需要您安裝任何插件等。

它可以在Firefox和Chrome中使用，但不能在IE中使用。

Answer 1

它使用HTML5拖放API。

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

Answer 2

他們使用的HTML5的功能之一。 IE不支持HTML 5或標準或...

Here is a blog這可以很好地解釋拖放。

Answer 3

HTML5拖放API可以像其他人說的那樣在流血的瀏覽器中使用。

Google Gears（「插件」）可以爲舊版瀏覽器（FF和IE）添加drag'n'drop功能（我知道Google Wave至少在Google Wave開發預覽中使用了齒輪）。需要注意的是gears will not be supported forever

Answer 4

我想你正在尋找這個http://www.plupload.com/

Answer 5

使用dropzonejs。

這是一個輕量級庫，通過簡單地添加dropzone類來形成元素，從而支持文件丟失。它使用HTML5處理文件，甚至顯示放入其中的圖像預覽。在不兼容的瀏覽器中，它會回退到簡單的文件上傳表單。另外：它看起來不錯。

看看吧！

聲明：我寫這個庫。

Answer 6

讓我們在這裏總結一個例子所有這些環節打破之前=）

當您將與HTML5 DnD API，文件拖放形成桌面/文件瀏覽器到瀏覽器：

• drop事件回調對象具有dataTransfer.files屬性
• 這是一個HTML5 File APIFileList對象
• 其中包含File 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。

這將提醒文件基本名稱（無法從文件API獲取路徑）。

順便說一句，其他基本的方法你可以得到File對象是通過.files IDL屬性的input type=file。與DnD相比，此方法對於小屏幕更友好，您需要兩個窗口同時處於良好的相對位置。不幸的是，似乎它是目前無法移植到拖放到一個input type=file：drag drop files into standard html file input

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