使用 HTML5 和 Javascript 从桌面上传（拖放）答案

【问题标题】：Upload from desktop with HTML5 and Javascript (drag and drop)使用 HTML5 和 Javascript 从桌面上传（拖放）
【发布时间】：2016-10-02 17:53:33
【问题描述】：

我正在为将图像从桌面上传到浏览器进行典型的拖放操作，我可以将内容拖放到框中，并使用 console.log 在浏览器控制台中查看内容：

File { name: "deam230mthumb.jpg", lastModified: 1194641808000, lastModifiedDate: Date 2007-11-09T20:56:48.000Z, size: 60313, type: "image/jpeg" }

我想查看框内的图片，然后在提交时上传。

这里我的代码是使用 Jade 模板引擎：

翡翠 (HTML)

form(action="" enctype="multipart/form-data")
 div(class="all-100 miniatures")
 div(class="all-100 drop ink-droppable align-center fallback" id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)")

Javascript

script.
      var dropZone = document.getElementById('dropZone');
      function allowDrop(e){
        e.preventDefault();
      }

      function drop(e){
        var file = e.dataTransfer.files[0];
        e.preventDefault();
        console.log(file);
        //e.target.appendChild(file);

      }

【问题讨论】：

标签： javascript html drag-and-drop pug image-upload

【解决方案1】：

我为事件中的每个文件添加了一个数组，在下面的代码中，我们需要添加一个控制器来处理数组中的每个文件，并在数据库中注册每个文件。

script.
      var dropZone = document.getElementById('dropZone');
      function allowDrop(e){
        e.preventDefault();
      }
      var files = [];
      function drop(e){
        var file = e.dataTransfer.files[0];
        files.push(file);
        console.log(file)
        e.preventDefault();

        var reader = new FileReader();
        reader.onload = function(event){
          var miniatures = document.getElementById("miniatures");      
          var img = new Image();
          img.src = event.target.result;
          var miniature = document.createElement("div");
          miniature.className = "all-20";
          miniature.appendChild(img);
          miniatures.appendChild(miniature);               
        }
        var readerContent = reader.readAsDataURL(file);
        var input = document.getElementById("upload");
        input.files = readerContent;
        console.log(files);
      }

【讨论】：

【解决方案2】：

好的，我的 Javascript 现在看起来是这样的：

此时我们可以将图像从桌面拖动到浏览器并查看他们，现在，我们需要上传这些文件。

script.
      var dropZone = document.getElementById('dropZone');
      function allowDrop(e){
        e.preventDefault();
      }

      function drop(e){
        var file = e.dataTransfer.files[0];
        e.preventDefault();
        console.log(file);
        var reader = new FileReader();
        reader.onload = function(event){
          var miniatures = document.getElementById('miniatures');
          var miniature = new Image();
          miniature.src = event.target.result;
          miniature.width = 100;
          miniatures.appendChild(miniature);
        }
        reader.readAsDataURL(file);
      }

【讨论】：