restrict the size of the document in <FILE>

swarnap · October 20th, 2006, 05:04 AM

I'm using a file type control (<input type="file">) to browse the document and store in the database. I wanted to know...
1) how to check if the size of the file to be uploaded is less than certain size say 1GB.
2) To ensure that only certain formats are allowed to enter into database.

How to perform these validations on the client side using javascript.

Any help will be really appreciated. thanks in advance.

surendran · November 1st, 2006, 02:35 AM

Hi,
I found a script, try this

<script language="javascript">
//BEGIN FROM http://weblogs.macromedia.com/cantre...o_implemen.cfm
var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i;
function previewImage(pathField, previewName)
{
var path = pathField.value;
if (path.search(imgRe) != -1)
{
document[previewName].src = 'file://'+path;
//END FROM http://weblogs.macromedia.com/cantre...o_implemen.cfm

{
var img = new Image();
img.src = 'file://'+path;
document.write(img.width + ' pixels wide x ' + img.height +' pixels high<br>'+ '<img src=' + img.src + '><br>');

}

{
// BEGIN FROM: http://www.quirksmode.org/js/filesize.html
var size = (document.fileSize)*1;
var y = document.images;
var imglength = 0;
for (i=0;i<y.length;i++)
{
imglength += (y[i].fileSize)*1;
}
var total = size + imglength;
//uncomment the following to return more page info
//var writestring = 'File size HTML: ' + size;
//writestring += '\nFile size images: ' + imglength;
//writestring += '\nTotal file size: ' + total;
// END FROM: http://www.quirksmode.org/js/filesize.html

var writestring = 'Image file size: ' + imglength + ' bytes<br>' ;
if (imglength < 1) writestring += "<b>NOT APPLICABLE: \nFile too large for this script.</B><BR>";

//if (total > 40000) writestring += "\nFile too large!" + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>';

if (imglength > 40000) writestring += "\nFile too large!";

//if (total < 40000) writestring += "\nFile size OK." + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>';

//if (imglength >= 1)writestring += "\nFile size OK." + '<a href="javascript: history.go(-1)"><br>RETURN TO PREVIOUS PAGE</a>';

if (((40000 + imglength)<40000)) writestring +="\nFile size not OK.";

if (((40000 + imglength)>40000)) writestring +="\nFile size OK.";
document.write(writestring);

}

}
else
{
alert("JPG, PNG, and GIFs only!");
}
}
</script>
</head>
<body><form name="imageTest">
<input type="file"
name="myImage"
size="30" onChange="previewImage(document.imageTest.myImage,
'replaceMe')"/>
<br>
<img src="clear.gif" name="replaceMe" width="1" height="1"/>
</form> </body>

http://qhtimes.com/aspexamples/checkfile.asp

surendran
(Anything is Possible)
http://ssuren.spaces.msn.com

swarnap · November 2nd, 2006, 03:13 AM

<head>
<SCRIPT LANGUAGE="JavaScript">

function LimitAttach(form, file)
{
  var imgRe = /^.+\.(doc|pdf|txt|rtf)$/i;
  var path = file;
  if (path.search(imgRe) != -1)
  {
    form.submit();
  }
  else
     alert("Sorry, only PDF documents allowed.");
  }

</script>
</head>

<body>
        <form method=post name=upform action=abc.html enctype="multipart/form-data">
                <p align="left">
                <INPUT TYPE="file" SIZE="40" NAME="uploadfile" id="uploadfile"><BR>
                  <INPUT TYPE=button VALUE="Upload!" onclick="LimitAttach(this.form, this.form.uploadfile.value)">
             </FORM>
</body>
I tried this code to check for the file extension. But still I'm unable to determine the size of the file to be uploaded. Can anyone help me on this. Help will be really appreciated. Thanks in advance.

richard.york · November 6th, 2006, 10:15 AM

You do know that client-side validation should accompany server-side validation, and can be circumvented?

That said, just use the browser's built-in method of limiting the file size, include the following before the input field:

<input type="hidden" name="MAX_FILE_SIZE" value="30000" />

This is a reference to the PHP manual, but this part of it is universally applicable:
http://cn.php.net/manual/en/features.file-upload.php

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html