Get blob image from file input using jQuery

Question

I am having some problems to take image as 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 im getting the same error: uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

How can I solve? I try some methods to read the data from file object with FileReader but nothing solves my problem.

Thx for ur help guys

you should put reader.readAsDataURL(file); after assigning the reader.onload. and $("#imgGaleria3")[0].files is an array of files . you should use $("#imgGaleria3")[0].files[0] — Majed DH
– Majed DH, Commented May 24, 2015 at 13:42
I dont understand why i should put : reader.readAsDataURL(file); after the reader.onload but u have the reason with the array of files.. thx too mate — Nega developer
– Nega developer, Commented May 24, 2015 at 17:00
Because it may finish reading the file even before attaching the on load function . — Majed DH
– Majed DH, Commented May 24, 2015 at 17:04
And how can i store this value? I need to store three images and some data more and have some problems because this func its async.. — Nega developer
– Nega developer, Commented May 24, 2015 at 18:56
You should put the same function at the end of each onload function, this function does tow things , first it makes sure all 3 are loaded or else it stoppes . if all 3 images are loaded it continues to execute. — Majed DH
– Majed DH, Commented May 25, 2015 at 4:33

T McKeown · Accepted Answer · 2015-05-24 13:42:07Z

24

This line looks wrong:

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

You need file to be a single file not all the files.

Example:

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

or jQuery way:

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

answered May 24, 2015 at 13:42

T McKeown

12.9k1 gold badge27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John M · Accepted Answer · 2015-05-24 13:42:56Z

5

you're trying to execute the reader on an array.

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);
    };
}

answered May 24, 2015 at 13:42

John M

3574 silver badges14 bronze badges

1 Comment

Bruno Ribeiro Over a year ago

thanks, I test using Jquery fileinput plugin and it's works

Collectives™ on Stack Overflow

Get blob image from file input using jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related