Using FileReader() to read an image from HTML form

Question

I am trying to use the readAsDataURL function for a javascript FileReader in order to retrieve data from an html form to upload it into a database. I currently have a file Object from the form but cannot get it into a form to put into a database.

HTML

input type="file" style="width: 300px" id="costumePicUpload" multiple
button type="submit" onclick="submitForm()">SUBMIT</button

JavaScript

 function submitForm(){

         var file = document.getElementById("costumePicUpload").files[0];
  var reader = new FileReader();
  var img;

  reader.onloadend = function(e) {
    img = new Image();
    img.src = e.target.result;
    if(e.target.error){
        alert(e.target.error.code);
    }
  };
  reader.readAsDataURL(file);
};
}

When I output the link in an alert it just says undefined. Does anyone know how I can fix this?

UPDATE I was able to get a FileError.NOT_READABLE_ERR but have no idea what could be causing this.

I have edited the original post. Multiple was in an example I saw because it is an array of files — user3236088
– user3236088, Commented Jan 25, 2014 at 20:53

Ravi · Accepted Answer · 2014-01-30 09:28:18Z

1

I faced the same problem here is code

Html code

<input type="file" name="costumePicUpload"  id="costumePicUpload" onChange="viewImage(this)" >
<img src="#" id="imageThumb">

Javascript Function

function viewImage(input) {
    if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imageThumb').attr('src', e.target.result);
            }   
            reader.readAsDataURL(input.files[0]);
    }
}

When we choose the image file to upload it will read image using file reader and set it as a source for another image with id "imageThumb".

answered Jan 30, 2014 at 9:28

Ravi

1823 silver badges18 bronze badges

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

1 Comment

ChrisM Over a year ago

How would i then go about including the image as a parameter in a form. I.E someone choosing an image to place with a classified ad.

Collectives™ on Stack Overflow

Using FileReader() to read an image from HTML form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related