检查拖放内容是否为图像

Check if drag / drop content is image

本文关键字：图像 是否 拖放 检查      更新时间：2023-09-26

我想检查拖放到区域上的内容是否是图像。我的代码可以在Chrome和Firefox中使用，但不能在Safari中使用。我想这是因为Safari没有图像的dataTransfer类型text/html/em>。Safari有变通办法吗？

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;
        }
    }
});

您可以使用DataTransfer.files属性来获取丢弃文件的mime类型，并根据已知的允许图像类型列表进行检查。

在这个片段中，我必须禁用文档上的默认dragover事件处理，以防止浏览器在检查DataTransfer对象之前仅显示图像。

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/jpeg'];
  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:相关文档的一些链接

  • FileList文档
  • Blob类型文档
相关文章：