Ankur Ankur - 5 months ago 26
Javascript Question

onload function in javascript not working Android

I am trying to read a image as a file and then display the image name,size etc. I debugged my code and found my onload function is loading but not working. Thank you for your help. I have included my whole FileSelection() method.

var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576; // 1MB
var oTimer = 0;
var sResultFileSize = '';
var oImage = new Image();


function fileSelected() {

alert("hello");
// hide different warnings

document.getElementById('upload_response').style.display = 'none';
document.getElementById('error').style.display = 'none';
document.getElementById('error2').style.display = 'none';
document.getElementById('abort').style.display = 'none';
document.getElementById('warnsize').style.display = 'none';

// get selected file element
var oFile = document.getElementById('image_file').files[0];

// filter for image files
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (! rFilter.test(oFile.type)) {
alert("problem");
document.getElementById('error').style.display = 'block';
return;
}

// little test for filesize
if (oFile.size > iMaxFilesize) {
document.getElementById('warnsize').style.display = 'block';
return;
}

// get preview element
oImage = document.getElementById('preview');
alert("hello2");


// prepare HTML5 FileReader
var oReader = new FileReader();

alert("hello3")

oReader.onload = function(e)
{
alert("hello4");


alert("reached");

oImage.onload = function () { // binding onload event

alert("hi");

// oImage.src = e.target.result;
// we are going to display some custom image information here

sResultFileSize = bytesToSize(oFile.size);
document.getElementById('fileinfo').style.display = 'block';
document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
};

// e.target.result contains the DataURL which we will use as a source of the image
oImage.src = e.target.result;
};

alert("file found");
// read selected file as DataURL
oReader.readAsDataURL(oFile);


}

Answer

Giving you the changes I was talking about in the comments:

//You want this somewhere
var oImage = new Image();

var oReader = new FileReader();

alert("hello3")

oReader.onload = function(e)
{
   alert("hello4");
   oImage.onload = function () { // binding onload event
      alert("hi");
      // we are going to display some custom image information here
      sResultFileSize = bytesToSize(oFile.size);
      document.getElementById('fileinfo').style.display = 'block';
      document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;
      document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;
      document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;
      document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;
     };

     // Make sure this comes after
     oImage.src = e.target.result;
};

// read selected file as DataURL
oReader.readAsDataURL(oFile);
Comments