Display image after dragging and dropping on html page

Question

I am using drag and drop control using jQuery / JS. What has been done is that the user drags some image file and drags it to the html page. After deleting the file, I show only the file name and its size.

What do I need to display the image on the page. But I can not get the contents of the image file in jquery.

Below is the code I wrote:

function handleFileUpload(files, obj) { for (var i = 0; i < files.length; i++) { var fd = new FormData(); fd.append('file', files[i]); var status = new createStatusbar(obj); //Using this we can set progress. status.setFileNameSize(files[i].name, files[i].size); sendFileToServer(fd, status); } } $(document).ready(function () { var obj = $("#dragandrophandler"); obj.on('dragenter', function (e) { e.stopPropagation(); e.preventDefault(); $(this).css('border', '2px solid #0B85A1'); }); obj.on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); }); obj.on('drop', function (e) { $(this).css('border', '2px dotted #0B85A1'); e.preventDefault(); var files = e.originalEvent.dataTransfer.files; //We need to send dropped files to Server handleFileUpload(files, obj); }); $(document).on('dragenter', function (e) { e.stopPropagation(); e.preventDefault(); }); $(document).on('dragover', function (e) { e.stopPropagation(); e.preventDefault(); obj.css('border', '2px dotted #0B85A1'); }); $(document).on('drop', function (e) { e.stopPropagation(); e.preventDefault(); }); }); 

Only the following attributes are displayed in the debug function handleFileUpload :

Can you help in this regard?

thanks

Answer 1

So, here is how I solved the problem:

 function handleFileUpload(files, obj) { for (var i = 0; i < files.length; i++) { var fd = new FormData(); fd.append('file', files[i]); var status = new createStatusbar(obj); //Using this we can set progress. //status.setFileNameSize(files[i].name, files[i].size); //sendFileToServer(fd, status); var list = document.getElementById("image-list"); var cell = document.createElement("td"); var img = document.createElement("img"); img.classList.add("obj"); img.file = files[i]; cell.setAttribute("align", "center"); cell.setAttribute("valign", "bottom"); cell.appendChild(img); list.appendChild(cell); var reader = new FileReader(); reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(files[i]); } } 

Answer 2

I have not tried, but you are using the HTML5 File API . Your image is an instance of the File class, which itself is a subclass of Blob . Using FileReader , you can access the contents of the file. This MDN article refers to another article on the network that shows how to use it: Display thumbnails of user-selected images

Basically, you get access to the content as follows:

 function handleFileUpload( files, obj ) { for( var i = 0; i < files.length; i++ ) { // ... your other code var reader = new FileReader(); reader.onload = function(){ // Should look like data:,<jibberish_data> based on which method you called console.log(e.target.result); }; reader.readAsDataURL(files[i]); } }