javascript - 檔案拖曳到瀏覽器如何取得files?

Question

如果是在頁面上傳點選 可以點選後取得 input file 裡的 files[0]; 現在需求是直接在桌面把圖片拖曳到瀏覽器。如何取得 files[0] 第一個檔案？

typecho · Answer

/**
 * 拖拽实现
 */
var dropbox = document.getElementById("dropbox");

dropbox.addEventListener("dragenter", function(e){
    e.stopPropagation();
    e.preventDefault();
}, false);
            
dropbox.addEventListener("dragover", function(e){
    e.stopPropagation();
    e.preventDefault();
}, false);
            
dropbox.addEventListener("drop", function(e){
    e.stopPropagation();
    e.preventDefault();
            
    var dt = e.dataTransfer;
    var files = dt.files;
    
    // files[0]即为第一个文件
      
}, false);

具體可以參考：透過拖放操作來選擇檔案

另外給你推薦一個我寫的例子：
選擇圖片檔案－支援三種方式（輸入框選擇，拖曳選擇，截圖貼上三種輸入方式）

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學