Get blob image from file input using jQuery

Question

I'm having trouble displaying the image as a blob using jQuery:

Here is my code:

var file = $("#imgGaleria3")[0].files; if (file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { // browser completed reading file - display it alert(e.target.result); }; } 

And all the time I get the same error: uncaught TypeError: Failed to execute 'readAsDataURL' in 'FileReader': parameter 1 is not of type 'Blob'.

How can i decide? I am trying to use some methods to read data from a file object using FileReader, but nothing solves my problem.

thanks for ur help guys

Answer 1

This line does not look right:

 var file = $("#imgGaleria3")[0].files; 

You need file be the only file of not all files.

Example:

 var file = document.querySelector('input[type=file]').files[0]; 

or jQuery method:

 var file = $("#imgGaleria3")[0].files[0]; 

Answer 2

You are trying to read in an array.

to try

 var file = $("#imgGaleria3")[0].files[0]; if (file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { // browser completed reading file - display it alert(e.target.result); }; }