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



 





留言