HTML5:拖曳圖片到網頁預覽

這篇示範一個實體拖曳圖片檔案顯示在網頁上。

使用上一篇:HTML5: div內文字置中與多class結果展示，設定一個拖曳區域。加入drop事件，使用dataTransfer取得拖曳的檔案路徑。再設定img標籤的src完成顯示圖片的功能

成果展示

程式碼

參考資料

• https://ithelp.ithome.com.tw/articles/10198431
• https://developer.mozilla.org/zh-TW/docs/Web/API/HTML_Drag_and_Drop_API