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

Question

如果是在頁面上傳點擊 可以點選後取得 input file 裡的 files[0];

現在需求是直接在桌面把圖片拖曳到瀏覽器。如何取得 files[0] 第一個檔案？

Answer 1

/**
 * 拖拽实现
 */
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);

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

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