Question

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

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

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

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

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

      }

Answer 1

好的，我的 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);
      }

Answer 2

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

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

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

2 个答案: