html5 本地文件拖拽到浏览器

<link href="css/default.css" rel="stylesheet" type="text/css" />
 <style>
            #dropzone {
              height: 150px;
              width: 100%;
              -webkit-border-radius: 10px;
              -khtml-border-radius: 10px;
              -moz-border-radius: 10px;
              border-radius: 10px;
              border: 2px dashed #0687FF;
            }
            #dropzone.rounded {
              -webkit-box-shadow: inset 0px 0px 50px #777;
              -moz-box-shadow: inset 0px 0px 50px #777;
              -o-box-shadow: inset 0px 0px 50px #777;
              box-shadow: inset 0px 0px 50px #777;
            }
            #dnd-thumbnails {
              height: 125px;
              margin-top: 10px;
            }
            #dnd-thumbnails img {
              width: 75px;
              height: 75px;
              border: 1px solid black;
              margin-right: 10px;
              -webkit-transition: -webkit-transform 0.2s ease-in, margin-left 0.7s ease-in-out, margin-right 0.7s ease-in-out;
              -moz-transition: -moz-transform 1s ease-in-out, margin-left 0.7s ease-in-out, margin-right 0.7s ease-in-out;
              -o-transition: -o-transform 1s ease-in-out, margin-left 1s ease-in-out, margin-left 0.7s ease-in-out, margin-right 0.7s ease-in-out;
            }
            #dnd-thumbnails img:hover {
              -webkit-transform: scale(3.0) rotate(10deg);
              -webkit-transform-origin: 50% 75px;
              -moz-transform: scale(3.0) rotate(10deg);
              -moz-transform-origin: 50% 75px;
              margin: 0 100px;
            }
          </style>

          <script defer>
            (function() {
              var dragZone = document.querySelector('#drag-zone');
              var dropZone = document.querySelector('#drop-zone');
              dragZone.addEventListener('dragstart', function(event) {
                if (event.target.className) { // img case
                  event.dataTransfer.effectAllowed = event.target.className;
                  event.target.style.border = "4px solid #cc3300";
                }
                else { // text case
                  if (event.target.parentNode.className == 'overwrite') {
                    event.dataTransfer.setData("text", "<strong>Overwritten Content</strong>");
                  }
                  event.target.parentNode.style.border = "4px solid #cc3300";
                }
                return true;
              }, true);
              dragZone.addEventListener('dragend', function(event) {
                if (event.target.className) { // img case
                  event.target.style.border = "4px solid #888";
                }
                else { // text case
                  event.target.parentNode.style.border = "4px solid #888";
                }
                return true;
              }, true);
              dropZone.addEventListener('dragenter', function(event) {
                if (event.preventDefault) event.preventDefault();
                event.dataTransfer.dropEffect = 'copy';
                this.className = 'hovering';
                return false;
              }, false);
              dropZone.addEventListener('dragover', function(event) {
                if (event.preventDefault) event.preventDefault(); // allows us to drop
                event.dataTransfer.dropEffect = 'copy';
                return false;
              }, false);
              dropZone.addEventListener('dragleave', function(event) {
                if (event.preventDefault) event.preventDefault(); // allows us to drop
                this.className = '';
                return false;
              }, false);
              dropZone.addEventListener('drop', function(event) {
                if (event.preventDefault) event.preventDefault();
                var imgPassed = null;
                var dropdata = document.querySelector('#drop-data');
                var types = event.dataTransfer.types;
                document.querySelector('#drop-data').textContent = '';
                this.innerHTML = '';
                for (var i = 0; i < types.length; i++) {
                  if (types[i] == 'Files') {
                    var files = event.dataTransfer.files;
                    for (var j = 0; j < files.length; j++) {
                      dropdata.textContent += 'File Name: '+files[j].fileName;
                      dropdata.textContent += 'File Size: '+files[j].fileSize;
                    }
                  }
                  else {
                    if (typeof event.dataTransfer.getData(types[i]) !== 'undefined') {
                      dropdata.innerHTML += '<p><em class="datatypes">'+types[i]+'</em>: <br />'+event.dataTransfer.getData(types[i]).replace(/</g, '&lt;') + '</p>';
                    }
                  }
 
                  if (types[i] == 'text/uri-list') {
                    imgPassed = event.dataTransfer.getData('text/uri-list');
                  }
                }
                if (imgPassed) {
                  var cEl = document.createElement('canvas');
                  cEl.width = 200;
                  cEl.height = 100;
                  var ctx = cEl.getContext('2d');
                  var img_buffer = document.createElement('img');
                  img_buffer.src = imgPassed;
                  img_buffer.style.display = 'none';
                  document.body.appendChild(img_buffer); // this line only needed in safari
                  img_buffer.onload = function() { ctx.drawImage(img_buffer,0,0,100,100); }
                  this.appendChild(cEl);
                } else {
                  if (event.dataTransfer.getData('text')) {
                    this.innerHTML = event.dataTransfer.getData('text');
                  }
                  else if (event.dataTransfer.getData('text/plain')) {
                    this.innerHTML = event.dataTransfer.getData('text/plain');
                  }
                }
                return false;
              }, false);
            })();
            </script>
 
 <div class="example">
              <div id="dropzone" class="vbox boxcenter center">
                Drop in images from your desktop
              </div>
            </div>
            <div id="dnd-thumbnails" class="center"></div>
 
            <script src="src/dnd/dnd-lib.js" defer></script>
            <script defer>
              window.addEventListener('load', function(e) {
                var dndc = new DNDFileController('dropzone', 'dnd-thumbnails');
              }, false);
            </script>
          </section>
        </div>