Problem with check file size with Javascript

[marfola]

I’m trying to find the file size using javascript, before it get uploaded into the server using the following Javascript (I don’t want to use ActiveX because of compatibility problem).

function imageSize (pathField, previewName)
{       
        var str = '';
        var path = pathField.value;
        document[previewName].src = 'file://'+path.replace(/\\/gi,'/');
var img = new Image();
    img.src = 'file://'+path.replace(/\\/gi,'/');
    var size_pic = document.getElementById(previewName).fileSize;
    str = "File size="+size_pic;
      return (str);
}

my HTML who call it:

[HTML]<form name="myform" method="post" action="<myaction>">
<input name="upload_file" type="file" id="upload_file" size="28" value="" onChange="javascript:imageSize(document.myform.upl oad_file, 'tmpImg')"><br>
<img src="tmp.gif" name="tmpImg" width="1" height="1"/>
<input type="Submit" name="upload" value=”upload">
</form>[/HTML]

If I test my function offline it always manage correctly. Unfortunately, when I test it online (i.e. when I copy the html with the above javascript on my webserver Apache), it manages only if files I upload are little. Normally it returns -1!

Could someone help me to find the problem?

[acoder]

Welcome to TSDN!

You can't check file size with JavaScript. For local files in non-IE browsers, you won't even manage an image preview.

[marfola]

Thanks, but why my script run correctly if I try to load little images (lesser than 100KB)?

[acoder]

Which browsers are you testing on?

[marfola]

I'm testing on IE 7, but it would be better if my script run correctly also on Firefox

[acoder]

This will not work at all in Firefox.

Test it - it won't work even for small images.

JavaScript is not supposed to be able to access the local file system (which includes images).

[marfola]

Do you have some other suggestions to solve my problem, i.e. test image size before upload ?

[acoder]

Is this to save bandwidth?

[marfola]

Not only, I would like to send a file size exceed message to user, before to change page and before to force him to wait for a long time.

[acoder]

This won't be possible with JavaScript.

I know PHP has a feature where you can specify a size as a hidden field in the form and it won't upload if it exceeds that size. Other languages may have similar features.

[marfola]

Thanks a lot! I use PHP for my application. Could you give me more details?

[acoder]

Thanks a lot! I use PHP for my application. Could you give me more details?

Something like:[HTML]<input type="hidden" value="1000000" name="MAX_FILE_SIZE">[/HTML]
See this page

[marfola]

I just use this field:

[html]<input type="hidden" name="MAX_FILE_SIZE" value="2097152">[/html]

but it doesn't allow me to give a message to user before upload, it only avoids the file to be uploaded after user click on submit button.

Do you know a way to check if this field is compatible with the "file" field?

[acoder]

What you can do is use an iframe and attempt an upload to the iframe. If the file size is too large, you can output something which you can check for and display an error message accordingly.