HTML5只拖放图像 [英] HTML5 Drag and Drop only images

问题描述

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

What i'm trying to do is : if all the dragged files was images drop them, but if there was other file exstensions don't drop them, but drop the images only.

这是我的尝试：

HTML：

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

Javascript：

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

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

i need to loop through the files that i dragged and if the file was image do something otherwise do something else, for example

file.jpeg is image
file.txt is not image

但如果我拖动其他文件扩展名与图像一起使用我的代码它没有放弃图像，它正在跳过这两个文件。

But using my code if i dragged other file extension with the image it's not dropping the image, it's skipping both files.

点是：只删除图像。

推荐答案

你可以使用FileReader测试这样的图像的文件类型：

You could use the FileReader and test the file type for an image like this:

// 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>

这篇关于HTML5只拖放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！