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, '<') + '</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>