为什么执行两次?
问题描述:
这解决了,通过DBS检查解决方案为什么执行两次?
我想创建一个主人MediaFire下降输入。我遇到函数,该函数重复两次。
从浏览器控制台消息:
se ejecuta la funcion file:13:3
File { name: "8b32cacb0ad946479513721142c7fc9f.jp…", lastModified: 1447114071000, lastModifiedDate: Date 2015-11-10T00:07:51.000Z, size: 161020, type: "image/jpeg" } file:18:7
fin de bucle file:30:5
se ejecuta la funcion file:13:3
File { name: "8b32cacb0ad946479513721142c7fc9f.jp…", lastModified: 1447114071000, lastModifiedDate: Date 2015-11-10T00:07:51.000Z, size: 161020, type: "image/jpeg" } file:18:7
fin de bucle file:30:5
代码
script.
var dropZone = document.getElementById('dropZone');
dropZone.addEventListener("drop", drop, false);
var miniatures = document.getElementById("miniatures");
var miniature = document.createElement("div");
miniature.className = "all-20";
var img = document.createElement("img");
var files;
var reader = [];
// mecanica
function drop(e){
console.log("se ejecuta la funcion");
var dt = e.dataTransfer;
files = dt.files;
for (var i = 0; i < files.length; i++){
var file = files[i];
console.log(file);
img.file = file;
miniature.appendChild(img);
miniatures.appendChild(miniature);
reader[i] = new FileReader();
reader[i].onload = (function(event){
return function(e){
event.src= e.target.result;
};
})(img);
reader[i].readAsDataURL(file);
}
console.log('fin de bucle');
}
HTML
form(action="" enctype="multipart/form-data")
input(class="all-100 drop ink-droppable align-center fallback" type="file" multiple="multiple" id="dropZone" ondrop="drop(event)")
答
你在HTML连接drop事件两次,一次并在一次JS。
删除其中的一个:
ondrop="drop(event)"
或
var dropZone = document.getElementById('dropZone');
dropZone.addEventListener("drop", drop, false);
+0
谢谢,这解决了第一种情况 –
那么,有什么实际问题?我以为你只希望它执行一次,但是你说'第二个是显示所有丢失文件的缩略图'所以我不知道你实际上想要解决什么。 – DBS
我添加了HTML部分,无论如何,函数drop(e)只能执行一次。 –