首頁  >  問答  >  主體

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

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

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

高洛峰高洛峰2709 天前691

全部回覆(1)我來回復

  • typecho

    typecho2017-06-12 09:27:02

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

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

    另外給你推薦一個我寫的例子:
    選擇圖片檔案-支援三種方式(輸入框選擇, 拖曳選擇,截圖貼上三種輸入方式)

    回覆
    0
  • 取消回覆