CODEWITHSUNDEEP
jqueryhtmlfile
Nega developer
Nega developer

Reputation: 269

Get blob image from file input using jQuery

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

Upvotes: 15

Views: 35556

Answers (2)

John M
John M

Reputation: 357

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

Upvotes: 5

T McKeown
T McKeown

Reputation: 12857

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];

Upvotes: 24

Related Questions