为什么要执行两次？答案

【问题标题】：Why is executing two times?为什么要执行两次？
【发布时间】：2016-10-07 12:48:05
【问题描述】：

已解决，请查看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)")

【问题讨论】：

那么，真正的问题是什么？我以为你只希望它执行一次，但后来你说 the second is to show miniatures of all dropped files 所以我不确定你到底想解决什么。
我加了HTML部分，反正drop(e)函数只能执行一次。

标签： javascript html file-upload drag-and-drop

【解决方案1】：

您将两次附加 drop 事件，一次在 HTML 中，一次在 JS 中。

删除其中一项：

ondrop="drop(event)"

或

var dropZone = document.getElementById('dropZone');
dropZone.addEventListener("drop", drop, false);

【讨论】：