HTML5 仅拖放图像

HTML5 Drag and Drop only images

本文关键字：图像 拖放 HTML5      更新时间：2023-09-26

我想做的是：如果所有拖动的文件都是图像，请删除它们，但如果有其他文件扩展，请不要删除它们，而只是删除图像。

这是我的尝试：

.HTML：

<div id="dropzone"></div>

Javascript ：

var dropzone = document.getElementById("dropzone");
dropzone.ondrop = function (e) {
    e.preventDefault();
    e.stopPropagation();
    var files = e.dataTransfer.files;
    for(x = 0; x < files.length; x = x + 1){
        if(files[x].type.split("/")[0] == 'image') {
            console.log(files[x].name + "is image");
        }else {
            console.log(files[x].name + "is not image");
        }
    }
}

我需要遍历我拖动的文件，如果文件是图像，请执行其他操作，例如

file.jpeg is image
file.txt is not image

但是使用我的代码，如果我将其他文件扩展名与图像一起拖动，它不会删除图像，而是跳过两个文件。

关键是：只删除图像。

您可以使用 FileReader 并测试图像的文件类型，如下所示：

// don't try to process non-images
var imageType = /image.*/;
if (file.type.match(imageType)) {
   // it's an image, process it
}

下面是示例代码和演示：

// dropzone event handlers
var dropzone;
dropzone = document.getElementById("dropzone");
dropzone.addEventListener("dragenter", dragenter, false);
dropzone.addEventListener("dragover", dragover, false);
dropzone.addEventListener("drop", drop, false);
//
function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
  }
  //
function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
//
function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  var files = dt.files;
  handleFiles(files);
}
//
function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
      // get the next file that the user selected
      var file = files[i];
      var imageType = /image.*/;
      // don't try to process non-images
      if (!file.type.match(imageType)) {
        continue;
      }
      // a seed img element for the FileReader
      var img = document.createElement("img");
      img.classList.add("obj");
      img.file = file;
      // get an image file from the user
      // this uses drag/drop, but you could substitute file-browsing
      var reader = new FileReader();
      reader.onload = (function(aImg) {
        return function(e) {
          aImg.onload = function() {
              // draw the aImg onto the canvas
              var canvas = document.createElement("canvas");
              var ctx = canvas.getContext("2d");
              canvas.width = aImg.width;
              canvas.height = aImg.height;
              ctx.drawImage(aImg, 0, 0);
              // make the jpeg image
              var newImg = new Image();
              newImg.onload = function() {
                newImg.id = "newest";
                document.body.appendChild(newImg);
              }
              newImg.src = canvas.toDataURL('image/jpeg');
            }
            // e.target.result is a dataURL for the image
          aImg.src = e.target.result;
        };
      })(img);
      reader.readAsDataURL(file);
    } // end for
  } // end handleFiles
body {
  background-color: ivory;
}
canvas {
  border: 1px solid red;
}
#dropzone {
  border: 1px solid blue;
  width: 300px;
  height: 300px;
}
<h4>Drag file(s) from desktop to blue dropzone.<br>Only image files will be processed.</h4>
<div id="dropzone"></div>
<div id="preview"></div>

相关文章：