HTML JS 拖動檔案的操作，Drop 的使用 js html H5

MDN: ​​https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop​​

拖動檔案的操作指的是拖動檔案到指定 HTML 元素，再處理需要實作的功能。

要實作拖動檔案的操作，需要進行以下步驟：

1. 指定 drop 到的元素
2. 處理 ondrop 事件

一、 指定 drop 到的元素

拖動檔案時要把檔案放置到的元素

<div class="container"
     ondrop="handleDrag(event)"
     id="dropZone">
</div>      

二、處理相應的事件

• ondragover 當拖動到此元素時，但還沒有釋放
• ondragleave 當離開此元素時
• ondragend 拖動結束時
• ondrop 到指定元素釋放拖動操作時

這裡我們主要需要處理兩個事件， ​

​ondrop​

​​ 和 ​

​ondragover​

​

ondragover 處理拖動中的界面回報

因為當拖動到對應接收檔案的元素上時， dom 并不會發生變化，界面也不會有變化。但此時你需要給使用者一個回報，讓其知道拖動操作是有效的，給使用者一個回報：背景色變化、文字提示等。 這些操作就需要在 ​

​ondragover​

​ 上進行。比如添加一個背景色變化的 class。

<div class="container"
     ondrop="handleDrag(event)"
     ondragleave="handleDragEnd()"
     ondragend="handleDragEnd()"
     ondragover="handleDragOver(event)"
     id="dropZone">
</div>

function handleDragOver(event){
  $('.container').classList.add('on-hover')
}      

ondrop 處理釋放滑鼠時的檔案操作

​

​ondrop​

​​ 就是在你釋放滑鼠時候會觸發的事件，這裡就寫你需要處理的東西就可以了。

event 裡有個 ​​

​dataTransfer​

​​ 裡面包含着這些拖動的檔案清單 ​

​files​

​​ ​

​items​

​

你可以直接使用 ​

​event.dataTransfer.files​

​​ 來擷取檔案清單，

你也可以使用 ​​

​event.dataTransfer.items​

​​ 來擷取拖動的 item，再将其轉化為 file 處理，這個可以從下面這個連結中檢視例子，平常就直接使用 ​

​files​

​ 即可

MDN: ​​https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop​​

這裡要注意，需要添加 ​

​event.preventDefaults()​

​ 來避免浏覽器的預設動作：直接打開拖動的檔案。

function handleDragOver(event){
      $('.container').classList.add('on-hover')
   }
   
   function handleDragEnd(){
      $('.container').classList.remove('on-hover')
   }
   
   function handleDrag(event){
      handleDragEnd() // 去掉界面回報
      event.preventDefault() // 避免浏覽器預設打開拖動的檔案的操作

      let files = event.dataTransfer.files;
      console.log(event)
      showFiles(files) // 去進行檔案顯示的操作
   }      

例子

我寫了個拖動圖檔檢視圖檔的頁面：