HTML5 仅拖放图像

Question

我要做的是：如果所有拖动的文件都是图像，则将其丢弃，但如果有其他文件扩展名，则不要丢弃它们，而仅丢弃图像。 p>

这是我的尝试：

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

但是使用我的代码，如果我使用图像拖动其他文件扩展名，它不会丢弃图像，它会跳过这两个文件。

重点是：仅丢弃图像。

Answer 1

您可以使用 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>