JS - 拖放文件和獲取文件類型失敗

Question

我想粘貼的數據的文件類型，而是一個錯誤是在控制檯拋出：

JSFiddle

錯誤：

Uncaught TypeError: Cannot read property 'type' of undefined 

JS：

var reader = new FileReader(); 

$(".paste").on('drop', function(e) { 

    e.stopPropagation(); 
    e.preventDefault(); 

    var file = e.target.files || (e.dataTransfer && e.dataTransfer.files); 

    var legalTypes = ["image/png", "image/jpeg", "image/gif"]; 

    if(legalTypes.indexOf(file.type) === -1) { 

     alert("Please only upload image files!"); 
     return false; 
    } 

Answer 1

使用event.originalEvent獲取dataTransfer對象。

此外，文件對象將包含文件數組。所以你需要循環它們或使用第一個元素。

最終代碼將是：

$(document).ready(function() { 

    var reader = new FileReader(); 

$(".paste").on('drop', function(e) { 

    e.stopPropagation(); 
    e.preventDefault(); 

    var files = e.originalEvent.target.files || (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files); 

    var legalTypes = ["image/png", "image/jpeg", "image/gif"]; 

    for(i in files) { 

     if(legalTypes.indexOf(files[i].type) < 0) { 

      alert("Please only upload image files!"); 
      return false; 
     } 
    } 

    }); 

    });