Uploading images in HTML5 by dropzone.

Uploading images in HTML5 by dropzone.

HTML:

<div id="drop_zone">Drop files here</div>

<output id="list"></output>

STYLE:

 .thumb {

    height: 75px;

    border: 1px solid #000;

    margin: 10px 5px 0 0;

  }

#drop_zone {

border: 2px dashed #bbb;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

padding: 25px;

text-align: center;

font: 20pt bold 'Vollkorn';

color: #bbb;

}

JAVASCRIPT:

function handleFileSelect(evt) {

    evt.stopPropagation();

    evt.preventDefault();



    var files = evt.dataTransfer.files; // FileList object.



    // files is a FileList of File objects. List some properties.

    var output = [];

    for (var i = 0, f; f = files[i]; i++) 

    {

      // Only process image files.

      if (!f.type.match('image.*')) {

        continue;

      }

      var reader = new FileReader();

      // Closure to capture the file information.

      reader.onload = (function(theFile) 

      {

            return function(e) 

            {

              // Render thumbnail.

              var span = document.createElement('span');

              span.innerHTML = ['<img class="thumb" src="',

                                e.target.result,'" title="',

                                escape(theFile.name),'"/>'].join('');

              document.getElementById('list').insertBefore(span, null);

            };

      })(f);

      // Read in the image file as a data URL.

      reader.readAsDataURL(f);

       

      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',

                  f.size, ' bytes, last modified: ',

                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',

                  '</li>');

    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

  }



  function handleDragOver(evt) {

    evt.stopPropagation();

    evt.preventDefault();

    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

  }



  // Setup the dnd listeners.

  var dropZone = document.getElementById('drop_zone');

  dropZone.addEventListener('dragover', handleDragOver, false);

  dropZone.addEventListener('drop', handleFileSelect, false);

TEST IT: http://jsfiddle.net/sdorLj3e/