Html5: Display Images Dropped In Dropzone In Img Tag

I'm currently designing a small webpage that let's you upload png files to a ftp server using a dropzone in HTML5. When a user does drop an valid image into the dropzone, I would l

Solution 1:

I found a simple solution to the problem:

using _URL.createObjectURL(file) you can generate pathes for the uploaded files.

This are really just two lines:

var _URL = window.URL || window.webkitURL;
_URL.createObjectURL(file);

Solution 2:

You can use FileReader.readAsDataURL to accomplish this.

var dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

functiondragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

functiondragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

functiondrop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer,
      file = dt.files[0],
      img = document.createElement('img'),
      reader = newFileReader();
  
  dropbox.appendChild(img);

  reader.onload = function(e) {
    img.src = e.target.result;
  };
  
  reader.readAsDataURL(file);
}

#dropbox {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

<divid="dropbox"></div>