如何爲要拖入的圖像創建拖放區域？

javascript或html可以爲用戶拖入的圖像創建拖放區域嗎？我想這是一個圖像佔位符，它將接受在頁面生效時拖入它的圖像？從如何爲要拖入的圖像創建拖放區域？

來源

2010-10-29 Zain

圖片在哪裏？如果你想能夠從網頁本身拖動圖像，這是可能的，但如果你想從外部的圖像被刪除，那就是~~根本不可能使用JavaScript。~~此刻很難。

編輯：作爲@約翰博克提到的，這是可能的，但在目前，這些API是高度不規範和瀏覽器之間的差異很大。 HTML 5將支持標準和更簡單的API，但HTML 5本身並不是標準。

一些資源：

HTML5 Drag and Drop File API - 目前僅在Firefox中，將有望成爲標準很快
VBDataObject Interface - 在IE

來源

2010-10-29 04:35:00 casablanca

有可能從桌面到網站拖動文件，雖然它不是那麼容易。一個例子就是gmail附件。將文件拖到您正在撰寫的電子郵件中，並將其添加/上傳。 – 2010-10-29 04:39:28

任何代碼片段將幫助完整.... – Zain 2010-10-29 06:38:30

@ user441207：我添加了一些鏈接。 – casablanca 2010-10-29 14:19:34

簡答只適用：當然可以，但你的瀏覽器需要支持作爲HTML5一部分的拖放和文件API。目前，這只是Chrome 8+和Firefox 3.6+。

2011年7月更新：支持此功能的當前瀏覽器是Chrome，Firefox，Safari 6（如果使用FormData對象，則爲Safari 5）和IE 10 Preview 2。

IE 8和9不工作，不知道IE9最終會改變這種情況。

Safari 5（儘管Apple推出HTML5）不支持必需的File API，並且本機資源的DnD無法識別（頁面中的DnD可以正常工作，但這只是問題的一半）。您可以通過使用樣式化「FILE」類型的INPUT字段來實現不顯示文件路徑欄並利用拖放到Safari中的文件上傳框實際插入完整的文件名 - 你使用一些JavaScript來觸發上傳，只要他們放棄和中提琴。這是專門爲那個黑客設計的a tutorial。

歌劇似乎不支持任何API - 我讀過，他們在等待了HTML5規範的戰鬥，直到塵埃落定再加入必要的這樣做這些API的支持。

我其實上面鏈接的HTML5 Drag and Drop/File API Upload tutorial的作者和使用的方法在imgscalr.com正是你想要的實現 - 如果你想要把它拉下來，看看我是如何做的JavaScript是大量註釋。

希望有所幫助。

來源

2011-02-08 17:05:42

最近http://www.dropzonejs.com/已經變得相當普遍。

來源

2013-01-17 17:45:11

只適用於最後一個瀏覽器版本，但是一個非常好的JS小部件。 – 2013-01-28 09:59:39

@EsteveCamps支持拖放上傳所需的API僅受現代瀏覽器支持。所以這不是DropzoneJS限制 - 它甚至爲舊版瀏覽器提供了一個回退。 – enyo 2013-04-17 22:07:19

如何爲要拖入的圖像創建拖放區域？

回答

相關問題