使用 HTML5 和 Javascript 从桌面上传(拖放)

Question

我正在为将图像从桌面上传到浏览器进行典型的拖放，我可以将内容放入框中并使用控制台.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)")

爪哇语

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);
      }

Answer 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);
      }

Answer 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);
      }