FileSize - image

[Ken]

I would like to measure the fileSize of the image (without uploading it -
php).

I use:
var size_pic = document.getElementById('num1').childNodes[0].fileSize;
alert("size = " + size_pic);
which works on IE with one exception.

With a first time displayed image, the script displays a size= -1 The image
is displayed on the first pass. The fileSize script is located after the
img script.
var image_display=document.createElement('img');
image_display.src='file://' + field;
image_display.name = 'pict';
document.getElementById('num1').appendChild(image_display);

The second pass is correct. size = 11479

Is this a cache problem? The first pass caches the file, the second pass
reads the file?

I tried running - var size_pic
=document.getElementById('num1').childNodes[0].fileSize; - twice but that
made no difference.

Is there a work around for this problem.

Is there a better way to measure filesize in JavaScript?

Have a good day!

Ken

 

[Zifud]

I would like to measure the fileSize of the image (without uploading it -

You asked this question a couple of weeks ago, the answer is still the
same - you can't. Read your thread of 9 Oct.

Zif.

 

[Grant Wagner]

I would like to measure the fileSize of the image (without uploading it -
php).

I use:
var size_pic = document.getElementById('num1').childNodes[0].fileSize;
alert("size = " + size_pic);
which works on IE with one exception.

With a first time displayed image, the script displays a size= -1 The image
is displayed on the first pass. The fileSize script is located after the
img script.
var image_display=document.createElement('img');
image_display.src='file://' + field;
image_display.name = 'pict';
document.getElementById('num1').appendChild(image_display);

The second pass is correct. size = 11479

Is this a cache problem? The first pass caches the file, the second pass
reads the file?

No, the problem is that the file has not yet loaded by the time you attempt to
access it's size. Make the display of it's size dependant on the onload event of
the image.

var image_display=document.createElement('img');
image_display.onload = function() {
alert(this.fileSize);
}
image_display.src='file://' + field;
image_display.name = 'pict';
document.getElementById('num1').appendChild(image_display);

Of course, you'll need to replace alert(this.fileSize) with something more
useful, perhaps create another node under the image and display the size there.

 

[Ken]

I would like to measure the fileSize of the image (without uploading it -
php).

I use:
var size_pic = document.getElementById('num1').childNodes[0].fileSize;
alert("size = " + size_pic);
which works on IE with one exception.

With a first time displayed image, the script displays a size= -1 The image
is displayed on the first pass. The fileSize script is located after the
img script.
var image_display=document.createElement('img');
image_display.src='file://' + field;
image_display.name = 'pict';
document.getElementById('num1').appendChild(image_display);

The second pass is correct. size = 11479

Is this a cache problem? The first pass caches the file, the second pass
reads the file?

No, the problem is that the file has not yet loaded by the time you attempt to
access it's size. Make the display of it's size dependant on the onload event of
the image.

var image_display=document.createElement('img');
image_display.onload = function() {
alert(this.fileSize);
}
image_display.src='file://' + field;
image_display.name = 'pict';
document.getElementById('num1').appendChild(image_display);

Of course, you'll need to replace alert(this.fileSize) with something more
useful, perhaps create another node under the image and display the size there.

Grant,
Thanks for the suggestion.
Works great.
Ken

 

[Ken]

I would like to measure the fileSize of the image (without uploading it -
php).

I use:
var size_pic = document.getElementById('num1').childNodes[0].fileSize;
alert("size = " + size_pic);
which works on IE with one exception.

With a first time displayed image, the script displays a size= -1 The image
is displayed on the first pass. The fileSize script is located after the
img script.
var image_display=document.createElement('img');
image_display.src='file://' + field;
image_display.name = 'pict';
document.getElementById('num1').appendChild(image_display);

The second pass is correct. size = 11479

Is this a cache problem? The first pass caches the file, the second pass
reads the file?

No, the problem is that the file has not yet loaded by the time you attempt to
access it's size. Make the display of it's size dependant on the onload event of
the image.

var image_display=document.createElement('img');
image_display.onload = function() {
alert(this.fileSize);
}
image_display.src='file://' + field;
image_display.name = 'pict';
document.getElementById('num1').appendChild(image_display);

Of course, you'll need to replace alert(this.fileSize) with something more
useful, perhaps create another node under the image and display the size there.

Grant,

This works but not like I want.

I am trying to determine the file size to test for size < max spec. The
script works for the first image but not for a second image which replaces
the first image if it is over spec.

Removing the onload... the script works but will not measure fileSize on the
first pass.

Any suggestions.

Ken

<input type=file size=65 name="picture1" onChange="image_size(this.value);"
Id="pt1">
<div id="image_size_display"></div>
<script type="text/javascript">
// Image size to be under max limit
function image_size(field){
if ((document.createElement) && (document.getElementById)) {
var image_display=document.createElement('img');
image_display.onload = function() { image_size = this.fileSize; }
image_display.src='file://' + field;
image_display.name = 'pict';
image_display.alt = 'image';

document.getElementById('image_size_display').appendChild(image_display);

alert("image_size = " + image_size);

if(image_size >2000000){alert("This picture ( file ) is geater than
2,000,000.\n\n" + "Select another picture or reduce the size of the picture
( file )")};
alert("test");

document.getElementById('image_size_display').removeChild(image_display);
} }
</script>