html5's file api example with jquery?
Gidon's description solves the problem. Here is a fully coded example in case someone else is looking to solve this problem and wants more detail.
// Bindings to HTML; replace these with your components.var $dropArea = $('#dropArea');var $picsHolder = $('#picsHolder');// Attach our drag and drop handlers.$dropArea.bind({ dragover: function() { $(this).addClass('hover'); return false; }, dragend: function() { $(this).removeClass('hover'); return false; }, drop: function(e) { e = e || window.event; e.preventDefault(); // jQuery wraps the originalEvent, so we try to detect that here... e = e.originalEvent || e; // Using e.files with fallback because e.dataTransfer is immutable and can't be overridden in Polyfills (http://sandbox.knarly.com/js/dropfiles/). var files = (e.files || e.dataTransfer.files); var $img = $('<img src="" class="uploadPic" title="" alt="" />'); for (var i = 0; i < files.length; i++) { (function(i) { // Loop through our files with a closure so each of our FileReader's are isolated. var reader = new FileReader(); reader.onload = function(event) { var newImg = $img.clone().attr({ src: event.target.result, title: (files[i].name), alt: (files[i].name) }); // Resize large images... if (newImg.size() > 480) { newImg.width(480); } $picsHolder.append(newImg); }; reader.readAsDataURL(files[i]); })(i); } return false; }});#dropArea { border: 10px dashed; border-radius: 10px; border-color: gray; width: 200px; height: 200px;}#dropArea:hover { border-color: black;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="picsHolder"></div><div id="dropArea"></div>