HTML5只拖放圖片

Question

我想要做的是：如果所有拖動的文件都是圖片放置它們，但是如果有其他文件擴充，請不要刪除它們，但只刪除圖像。

這裏是我的嘗試：

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>