CODEWITHSUNDEEP
javascripthtml
user3236088
user3236088

Reputation: 51

Using FileReader() to read an image from HTML form

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.

Upvotes: 3

Views: 3362

Answers (1)

Ravi
Ravi

Reputation: 182

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".

Upvotes: 1

Related Questions