Question

我想检查拖放到某个区域的内容是否是图像。我的代码适用于Chrome和Firefox，但不适用于Safari。我想这是因为Safari没有dataTransfer类型 text / html 用于图片。 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;
        }
    }
});

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

以下是MDN相关文档的一些链接：

检查拖放内容是否为图像

1 个答案: