gpt4 book ai didi

javascript - HTML5 仅拖放图像

转载 作者:搜寻专家 更新时间:2023-11-01 05:31:16 24 4
gpt4 key购买 nike

我想做的是:如果所有拖动的文件都是图像,则将它们删除,但如果有其他文件扩展名,则不删除它们,而仅删除图像。 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

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

重点是:只删除图像。

最佳答案

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

关于javascript - HTML5 仅拖放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27092053/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com