Sürükle/bırak içeriğinin görüntü olup olmadığını kontrol edin

Question

Bir bölgeye sürüklenen/bırakılan içeriğin bir görüntü olup olmadığını kontrol etmek istiyorum. Kodum Chrome ve Firefox'ta çalışıyor, ancak Safari'de çalışmıyor. Galiba, Safari'nin resimler için hiçbir dataTransfer tipi text/html olmadığı anlaşılıyor. Safari için bir çözüm var mı?

document.addEventListener('drop', function(e) {  
    var contentHtml;   
    if(e.dataTransfer){   
     contentHtml = (e.originalEvent || e).dataTransfer.getData('text/html'); 
     if($(contentHtml).is('img')){ 
      // do some things, then let the standard drop happen 
      return true; 
     } else { 
      // do other things, prevent drop 
      return false; 
     } 
    } 
}); 

Answer 1

Sen düştü dosyanın MIME türü almak ve izin verilen görüntü türlerinin bilinen listeye karşılaştırılmak üzere DataTransfer.files özelliğini kullanabilirsiniz.

Bu snippet'te, DataTransfer nesnesini incelemeden önce tarayıcının yalnızca görüntüyü görüntülemesini engellemek için varsayılan dragover olay işleme özelliğini devre dışı bırakmak zorunda kaldım. İşte

document.addEventListener('dragover', function(e) { 
 
    e.preventDefault(); 
 
}) 
 

 
document.addEventListener('drop', function(e) { 
 
    // set your image types 
 
    var imageTypes = ['image/png', 'image/gif', 'image/bmp', 'image/jpg']; 
 
    if (e.dataTransfer && e.dataTransfer.files) { 
 
    // e.dataTransfer.files is a FileList 
 
    // e.dataTransfer.files[0].type is a Blob.type 
 
    var fileType = e.dataTransfer.files[0].type; 
 
    if (imageTypes.includes(fileType)) { 
 
     window.alert('dropped file is an image'); 
 
    } else { 
 
     window.alert('dropped file is not an image'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

MDN'yi üzerinde ilgili belgelere bazı bağlantılar:

• FileList documentation
• Blob.type documentation