<style>

  .thumb {

    height: 75px;

    border: 1px solid #000;

    margin: 10px 5px 0 0;

  }

  #dropbox {

    width: 425px;

    height: 300px;

    border: 2px solid #DDD;

    border-radius: 8px;

    text-align: center;

    color: #BBB;

    font-size: 2em;

    font-family: Arial, sans-serif;

}

</style>

<div id="dropbox">Drop file here...</div>

​

Choose multiple files :<input type="file" id="files" multiple /><br/>

Choose a directory : <input  type="file" id="dir" webkitdirectory=""/><br/>

​

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

​

<script>

  window.onload= function() {

        // Ref to the droppable div

    var dropbox = document.querySelector("#dropbox");

​

    // init event handlers

    dropbox.addEventListener("dragenter", dragEnter, false);

    dropbox.addEventListener("dragexit", dragExit, false);

    dropbox.addEventListener("dragover", dragOver, false);

    dropbox.addEventListener("drop", drop, false);

  };

​

function dragEnter(evt) {

    evt.stopPropagation();

    evt.preventDefault();

}

​

function dragExit(evt) {

    evt.stopPropagation();

    evt.preventDefault();

}

​

function dragOver(evt) {

    evt.stopPropagation();

    evt.preventDefault();

}

​

function drop(evt) {

  console.log("dans drop");

    evt.stopPropagation();

    evt.preventDefault();

​

    var files = evt.dataTransfer.files;

    var count = files.length;

​

    // Only call the handler if 1 or more files was dropped.

    if (count > 0)

        readFilesAndDisplayPreview(files);

}

  function readFilesAndDisplayPreview(files) {

    // Loop through the FileList and render image files as thumbnails.

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

    }

  }

​

  function handleFileSelect(evt) {

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

    readFilesAndDisplayPreview(files);

  }

​

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

  document.getElementById('dir').addEventListener('change', handleFileSelect, false);

​

</script>