javascript - HTML5 Drag and Drop only images - Stack Overflow

admin管理员组

文章数量:1278789

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.

Here's my try :

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

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.

The point is : Dropping 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.

Here's my try :

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

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.

The point is : Dropping only images.

• javascript
• jquery
• html
• image
• drag-and-drop

Share Improve this question Follow edited Nov 23, 2014 at 17:47 Amr SubZero asked Nov 23, 2014 at 17:34 Amr SubZeroAmr SubZero 1,27655 gold badges2121 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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
}

Here's example code and a Demo:

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

本文标签： javascriptHTML5 Drag and Drop only imagesStack Overflow