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

Question

I'm making a typical drag and drop for upload images from desktop to browser, i can drop content inside the box and with a console.log view the content in the browser console:

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

I want to view the image inside a box and then upload on submit.

Here my code is use Jade template engine:

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

Ok, my Javascript looks this now:

At this point we can drag images from our desktop to browser and view them, now, we need to upload that files.

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

I added an array for content each file from the event, on the following code we need to add a controller for handle each file from the array with a register of each one on the database.

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