File Size

[Ken]

How can I determine a image file size before uploading it?

I would like to make sure the size is under a maximum before taking the time
to upload it.

If I have to upload the file before determining the size, it could take a
few minutes (Mbs) on a slow connection before I can determine if the size is
too large.

Thanks!

Ken

 

[Ivo]

How can I determine a image file size before uploading it?

I would like to make sure the size is under a maximum before taking the time
to upload it.

If I have to upload the file before determining the size, it could take a
few minutes (Mbs) on a slow connection before I can determine if the size is
too large.

Sorry, there is no way you can find out anything about the file to be
uploaded other than its name, at least with default security settings. Only
if it 's an image you can try adding it to the current page to read its
size, width and height.

 

[Ken]

size

Sorry, there is no way you can find out anything about the file to be
uploaded other than its name, at least with default security settings. Only
if it 's an image you can try adding it to the current page to read its
size, width and height.

This is an image file.
How do I read the size, width and height of the image using JavaScript when
it is added to the current page?

Ken

 

[Ivo]

This is an image file.
How do I read the size, width and height of the image using JavaScript when
it is added to the current page?

You can add it to the page onchange of the <input type="file"> element,
using document.createElement('img') or some inerHTML method. Be sure not to
specify any dimensions of your own or it will be those values that you read
later on. Then you can access imagereference.height, imagereference.width
and imagereference.fileSize (in bytes).
See for a live example (using IE...)
<url: http://4umi.com/web/javascript/imagewizard.htm >

 

[Ken]

You can add it to the page onchange of the <input type="file"> element,
using document.createElement('img') or some inerHTML method. Be sure not to
specify any dimensions of your own or it will be those values that you read
later on. Then you can access imagereference.height, imagereference.width
and imagereference.fileSize (in bytes).
See for a live example (using IE...)
<url: http://4umi.com/web/javascript/imagewizard.htm >

Thanks for the suggestion.

I am having problems creating the <img The image is not displaying. What
am I doing wrong?

Here is the script:
<input type=file name="picture1" onchange="image(this.value)" >

<script type="text/javascript">
function image(field){
// field=field.replace(/(http:\/\/)\1+/g,'$1'); //To learn this, the image
is on my computer and does not have an http.
var x=document.createElement('img');
document.images[1];
x.src=field;
}
</script>
<script type="text/javascript">document.images[1].click();</script>

 

[Ivo]

I am having problems creating the <img The image is not displaying. What
am I doing wrong?

Here is the script:
<input type=file name="picture1" onchange="image(this.value)" >

<script type="text/javascript">
function image(field){
// field=field.replace(/(http:\/\/)\1+/g,'$1'); //To learn this, the image
is on my computer and does not have an http.

A single-line comment over two lines... watch out for that! You probably
want to remove the replace() anyway as, before uploading, all images are
local.

var x=document.createElement('img');
document.images[1];

This is not a complete statement, and you do not need it here.

x.src=field;

OK, if 'field' contains the address of an image, now the image is ready to
be added to the document, the usual DOM-method for that is appendChild() or
insertBefore(). Again, see the example page. If that is succesful, the image
should show at the specified location in the page and you can read its
properties.

}
</script>
<script type="text/javascript">document.images[1].click();</script>

 

[Richard Cornford]

"Ken" wrote

... , the image should show at the specified location
in the page and you can read its properties.

<snip>

The image, however, originates in a different domain (and has a
different protocol; file to the page in which it may have been
inserted, So cross-domain/same origin security restrictions are likely
to apply to the reading of its properties. This, combined with the fact
that some browsers do not make the information available anyway, makes
client-side file size determination impossible to achieve cross-browser.

Richard.

 

[Ken]

<snip>

The image, however, originates in a different domain (and has a
different protocol; file to the page in which it may have been
inserted, So cross-domain/same origin security restrictions are likely
to apply to the reading of its properties. This, combined with the fact
that some browsers do not make the information available anyway, makes
client-side file size determination impossible to achieve cross-browser.

Richard.

I just want to use the file size to make sure it is smaller than a set
maximum. The image file size will only be use on the viewers browser.

Is it still considered a different domain? different protocol? if it is used
on the viewers domain. I do not want to use the size for upload.

Can you suggest which browsers do make the file size available?

My problem is:

If the viewer uploads a file greater the MAX_FILE_Size in PHP, he may have
to wait for several minutes if the file is size is 3000000. After which,
PHP set the file size to 0. The viewers then has to start the process over.
I am looking for a way to make sure the files sizes are under the max file
size without uploading, i.e. save time and eliminate an annoyance.

Ken

 

[Ken]

I am having problems creating the <img The image is not displaying. What
am I doing wrong?

Here is the script:
<input type=file name="picture1" onchange="image(this.value)" >

<script type="text/javascript">
function image(field){
// field=field.replace(/(http:\/\/)\1+/g,'$1'); //To learn this, the image
is on my computer and does not have an http.

A single-line comment over two lines... watch out for that! You probably
want to remove the replace() anyway as, before uploading, all images are
local.

var x=document.createElement('img');
document.images[1];

This is not a complete statement, and you do not need it here.

x.src=field;

OK, if 'field' contains the address of an image, now the image is ready to
be added to the document, the usual DOM-method for that is appendChild() or
insertBefore(). Again, see the example page. If that is succesful, the image
should show at the specified location in the page and you can read its
properties.

}
</script>
<script type="text/javascript">document.images[1].click();</script>

it is working. I did not have <div id="preview"> over the <img script.

Thanks.

Ken

 

[Ivo]

My problem is:

If the viewer uploads a file greater the MAX_FILE_Size in PHP, he may have
to wait for several minutes if the file is size is 3000000. After which,
PHP set the file size to 0. The viewers then has to start the process over.
I am looking for a way to make sure the files sizes are under the max file
size without uploading, i.e. save time and eliminate an annoyance.

It is also the user's problem. If you describe the limitations in the text
on the page (which you should anyway), a sensible user will think twice. You
cannot "make sure" in a cross-browser and cross-platform manner that
javascript is available to begin with.

 

[Richard Cornford]

I just want to use the file size to make sure it is smaller
than a set maximum. The image file size will only be use on
the viewers browser.

Is it still considered a different domain? different protocol?
if it is used on the viewers domain.

If the script originates on a web server then its protocol will probably
be either http: or https:, If you load an image from the user's local
hard disk its protocol will be file:. Accessing the properties of an IMG
(or Image object) loaded with a different protocol will almost certainly
be considered a security violation.

I do not want to use the size for
upload.

That is not exactly what your pervious posts say.

Can you suggest which browsers do make the file size available?

Windows IE browsers (from at least 5.0) certainly provide a fileSize
property on IMG elements and Image objects.

My problem is:

If the viewer uploads a file greater the MAX_FILE_Size in PHP,
he may have to wait for several minutes if the file is size is
3000000. After which, PHP set the file size to 0. The viewers
then has to start the process over. I am looking for a way to
make sure the files sizes are under the max file size without
uploading, i.e. save time and eliminate an annoyance.

It sounds like telling the user, in as many words, that if they attempt
to upload a file bigger than a certain size the server will reject the
upload automatically, would solve that problem.

Richard.

 

[Ken]

I just want to use the file size to make sure it is smaller than a set
maximum. The image file size will only be use on the viewers browser.

Is it still considered a different domain? different protocol? if it is used
on the viewers domain. I do not want to use the size for upload.

Can you suggest which browsers do make the file size available?

My problem is:

If the viewer uploads a file greater the MAX_FILE_Size in PHP, he may have
to wait for several minutes if the file is size is 3000000. After which,
PHP set the file size to 0. The viewers then has to start the process over.
I am looking for a way to make sure the files sizes are under the max file
size without uploading, i.e. save time and eliminate an annoyance.

Ken

Why does filesize = -1 on the first pass and after it runs through a second
time, the filesize is correct.

What does -1 mean?

document.getElementById('preview').appendChild(x);
wid = document.images[0].width;
height = document.images[0].height;
status=(document.images[0].fileSize)*1;
alert(wid + " " + height + " " + wid*height + " " + status); //
status = -1
wid = document.images[0].width;
height = document.images[0].height;
status=(document.images[0].fileSize)*1;
alert(wid + " " + height + " " + wid*height + " " + status); //
status = 4.8 mb
document.getElementById('preview').removeChild(x);
Ken

 

[Ken]

I just want to use the file size to make sure it is smaller than a set
maximum. The image file size will only be use on the viewers browser.

Is it still considered a different domain? different protocol? if it is used
on the viewers domain. I do not want to use the size for upload.

Can you suggest which browsers do make the file size available?

My problem is:

If the viewer uploads a file greater the MAX_FILE_Size in PHP, he may have
to wait for several minutes if the file is size is 3000000. After which,
PHP set the file size to 0. The viewers then has to start the process over.
I am looking for a way to make sure the files sizes are under the max file
size without uploading, i.e. save time and eliminate an annoyance.

Ken

Why does filesize = -1 on the first pass and after it runs through a second
time, the filesize is correct.

What does -1 mean?

document.getElementById('preview').appendChild(x);
wid = document.images[0].width;
height = document.images[0].height;
status=(document.images[0].fileSize)*1;
alert(wid + " " + height + " " + wid*height + " " + status); //
status = -1
wid = document.images[0].width;
height = document.images[0].height;
status=(document.images[0].fileSize)*1;
alert(wid + " " + height + " " + wid*height + " " + status); //
status = 4.8 mb
document.getElementById('preview').removeChild(x);
Ken

The answer is the image did not load before the filesize was determined. So
I expect the -1 defines null. Interesting though, the width and height were
not affected by the delay.

The solution is adding a time delay before determining filesize.

Ken