<!--Based on code from http://www.html5rocks.com/en/tutorials/file/dndfiles/ -->
<html><head><style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style></head><body><input type="file" id="files" name="files[]" multiple /><hr><div id="images"></div><script>
function loadFiles(event) {
var files = event.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0; 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 a = '<a href="' + e.target.result + '" target="_blank">';
var b = '<img class="thumb" src="' + e.target.result;
var c = '" title="' + escape(theFile.name) + '"/></a>';
document.getElementById('images').innerHTML+=a+b+c;
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', loadFiles, false);
</script></body></html>