Phát hiện loại tệp trên giải pháp trình duyệt qua trình thu thập thông tin

Question

Tôi đang tìm kiếm giải pháp trình duyệt chéo cho việc này. Trước tôi nói với bạn rằng tôi không muốn biết nếu là một tập tin chỉ, bởi vì tôi tìm thấy giải pháp cho điều đó. Tôi muốn biết nếu tập tin là một âm thanh, hình ảnh hoặc video về cơ bản. Trong Chrome khi bạn bắn sự kiện DragEnter bạn có thể nhận dữ liệu từ đây:

ev.originalEvent.dataTransfer.items[0].type; 

Nhưng trong Firefox, Safari và IE "items" spec chưa được applyed nào: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items

Trong những các trình duyệt bạn chỉ có thể thấy thuộc tính "tệp":

ev.originalEvent.dataTransfer.files[0]; 

Nhưng trên người kéo files[0] trống. Làm thế nào tôi có thể giải quyết vấn đề này để biết loại tệp trong các trình duyệt khác này?

Ví dụ (Chỉ hoạt động trên Chrome):

$(document).on('dragenter', '.drop-zone', function(ev) { 
 
    var e = ev.originalEvent; 
 
    e.dataTransfer.dropEffect = 'copy'; 
 
    var file = e.dataTransfer.items[0]; 
 
    var type = file.type.slice(0, file.type.indexOf('/')); 
 
    $(ev.target).html(type); 
 
}); 
 

 
$(document).on('dragleave', '.drop-zone', function(ev) { 
 
    $(ev.target).html('Drag your file over here to know the type, no need to drop it'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="drop-zone">Drag your file over here to know the type, no need to drop it</div>

Answer 1

tl; dr phiên bản: bạn không thể.

Trích dẫn this answer:

DRAG_OVER KHÔNG CÓ QUYỀN để xem dữ liệu trong trường hợp kéo.

Áp dụng cho cả hai sự kiện dragover và dragenter.

Tại sao? Vâng, nó sẽ là một vấn đề riêng tư nghiêm trọng. Hãy tưởng tượng rằng bạn có một tệp MP3 vì một số lý do bạn muốn mở trong trình duyệt của mình. Bạn có thể làm điều đó bằng cách kéo nó và thả trên thanh tab trình duyệt, như thế:

Trong quá trình kéo-và-thả, bạn kéo các tập tin trên trang mà bạn đang hiện trên, và tất nhiên bạn không muốn trang này biết bất kỳ điều gì về tệp này. Đó là lý do tại sao bạn không thể lấy thông tin về tệp được kéo cho đến khi nó thực sự bị loại bỏ.

---

Bạn có thể, tuy nhiên, kiểm tra các loại tập tin trên drop sự kiện:

"drop dragover".split(" ").forEach(function(eventName) { 
 
    document.addEventListener(eventName, function(event) { 
 
    event.preventDefault(); 
 
    }); 
 
}); 
 
document.addEventListener("drop", function(event) { 
 
    console.log(event.dataTransfer.files[0].type); 
 
});

html, body { 
 
    height: 100%; 
 
}

<p>Try dropping a file.</p>

Để được hỗ trợ trình duyệt drag-and-drop thấy caniuse.com.