Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Check the image file type before upload 1

Status
Not open for further replies.
DrumAt5280

DrumAt5280

Technical User
Sep 8, 2003
194
US
This neat script i found somewhere lets you check the file type before upload and works great, but how would i do this for a form where i am uploading multiple files at the same time?

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
extArray = new Array(".gif", ".jpg");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray == ext) { allowSubmit = true; break; }
}
if (allowSubmit) form.submit();
else
alert("Please only upload images that end in types: "
+ (extArray.join(" ")) + "\nPlease select a new "
+ "file to upload and submit again.");
}
// End -->
</script>
</HEAD>

<BODY>

<form method=post name=upform action="/cgi-bin/some-script.cgi" enctype="multipart/form-data">
<input type=file name=uploadfile>
<p>
<input type=button name="Submit" value="Submit" onclick="LimitAttach(this.form, this.form.uploadfile.value)">
</form>
</center>
 
Sort by date Sort by votes
are the image files in multiple text fields? separated by commas? how do you distinguish between image files?

--Chessbot
 
Upvote 0 Downvote
Chessbot,

There are 5 input text fields - each with their own "browse" button next to them - and one submit button on the bottom of the form. The above code works great for the input text field named "uploadfile" but what if i have "uploadfile1" thru "uploadfile5" - the "onclick" function call works for first one the way it is written now.

Thanks!
 
Upvote 0 Downvote
in your function:
instead of calling form.submit(), instead return true if you can submit and false if you cannot.

have another function:
Code: 
function checkAllFields(formName)
{
   var numFields=5;  //number of form fields
   var allFine=true;
   for (var i=0;i<numFields;i++)
   {
      if (!eval("LimitAttach("+form+","+form+".uploadfile"+i+".value"))
         allFine=false;
   }
   return allFine;
}
and the form tag would be <form method="post" name="upform" action="/cgi-bin/some-script.cgi" enctype="multipart/form-data" onSubmit="return checkAllFields(this)">

take out the onClick in the submit button.

the return checkAllFields(this) in the onSubmit causes the page to stop the link if checkAllFields() returns false. checkAllFields just checks each field to see if it is acceptible.


--Chessbot
 
Upvote 0 Downvote
Chessbot, thanks for helping! I understand the concept of what you are doing but i am not so good with javascript.

I published a test page here: (my real page is password protected).

This test page won't allow anyone to upload (which is not the point anyway) but this page should allow detection of the file type to work. As you can see it is not working...

My guess is i need to do something different to the !eval line of code.

Here is the new code with your code added:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
extArray = new Array(".gif", ".jpg");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray == ext) { allowSubmit = true; break; }
}
if (allowSubmit) form.submit();
else
alert("Please only upload images that end in types: "
+ (extArray.join(" ")) + "\nPlease select a new "
+ "file to upload and submit again.");
}
function checkAllFields(upform)
{
var numFields=5; //number of form fields
var allFine=true;
for (var i=0;i<numFields;i++)
{
if (!eval("LimitAttach("+form+","+form+".uploadfile"+i+".value"))
allFine=false;
}
return allFine;
}
// End -->
</script>
</HEAD>

<BODY>

<form method="post" name="upform" action="/cgi-bin/some-script.cgi" enctype="multipart/form-data" onSubmit="return checkAllFields(this)">
<input type="file" name="uploadfile1"><br />
<input type="file" name="uploadfile2"><br />
<input type="file" name="uploadfile3"><br />
<input type="file" name="uploadfile4"><br />
<input type="file" name="uploadfile5"><br />
<p>
<input type="button" name="Submit" value="Submit" >
</form>
</center>
 
Upvote 0 Downvote
Code: 
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) [COLOR=red]return false;[/color]
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) { allowSubmit = true; break; }
}
if (allowSubmit) [COLOR=red]return true; //NOT form.submit()[/color]
else
alert("Please only upload images that end in types:  " 
+ (extArray.join("  ")) + "\nPlease select a new "
+ "file to upload and submit again.");
[COLOR=red]return false;[/color]
}

2. in the <form> tag add at the end:
Code: 
onSubmit="return checkAllFields(this);"

that should do it

--Chessbot
 
Upvote 0 Downvote
Chessbot, thanks again for looking at this for me - however I tried your above revisions and it didn't work - try the above test link, i updated it with the latest code if you wanted to see for yourself.

I am way over my head with this javascript - sorry.

Here is the latest code - i am pretty sure i copied and pasted your revision correctly:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
extArray = new Array(".gif", ".jpg");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return false;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray == ext) { allowSubmit = true; break; }
}
if (allowSubmit) return true; //NOT form.submit()
else
alert("Please only upload images that end in types: "
+ (extArray.join(" ")) + "\nPlease select a new "
+ "file to upload and submit again.");
return false;
}
function checkAllFields(upform)
{
var numFields=5; //number of form fields
var allFine=true;
for (var i=0;i<numFields;i++)
{
if (!eval("LimitAttach("+form+","+form+".uploadfile"+i+".value"))
allFine=false;
}
return allFine;
}
// End -->
</script>
</HEAD>

<BODY>

<form method="post" name="upform" action="/cgi-bin/some-script.cgi" enctype="multipart/form-data" onSubmit="return checkAllFields(this);">
<input type="file" name="uploadfile1"><br />
<input type="file" name="uploadfile2"><br />
<input type="file" name="uploadfile3"><br />
<input type="file" name="uploadfile4"><br />
<input type="file" name="uploadfile5"><br />
<p>
<input type="button" name="Submit" value="Submit" >
</form>
</center>
 
Upvote 0 Downvote
change:
<input type="button" name="Submit" value="Submit">
to
<input type="submit" name="Submit" value="Submit">

--Chessbot
 
Upvote 0 Downvote
Chessbot,

Sorry that didn't work either. The way i am testing it is to try an upload a ".bmp" image which should trigger the error message - however it doesn't. Here is the code which is published on the link above:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
extArray = new Array(".gif", ".jpg");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return false;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray == ext) { allowSubmit = true; break; }
}
if (allowSubmit) return true; //NOT form.submit()
else
alert("Please only upload images that end in types: "
+ (extArray.join(" ")) + "\nPlease select a new "
+ "file to upload and submit again.");
return false;
}
function checkAllFields(upform)
{
var numFields=5; //number of form fields
var allFine=true;
for (var i=0;i<numFields;i++)
{
if (!eval("LimitAttach("+form+","+form+".uploadfile"+i+".value"))
allFine=false;
}
return allFine;
}
// End -->
</script>
</HEAD>

<BODY>

<form method="post" name="upform" action="/cgi-bin/some-script.cgi" enctype="multipart/form-data" onSubmit="return checkAllFields(this);">
<input type="file" name="uploadfile1"><br />
<input type="file" name="uploadfile2"><br />
<input type="file" name="uploadfile3"><br />
<input type="file" name="uploadfile4"><br />
<input type="file" name="uploadfile5"><br />
<p>
<input type="submit" name="Submit" value="Submit" >
</form>
</center>
 
Upvote 0 Downvote
change your original function to
Code: 
extArray = new Array(".gif", ".jpg");
function LimitAttach(file) 
{
    allowSubmit = false;
    if (!file) return false;
    while (file.indexOf("\\") != -1) 
    {
        file = file.slice(file.indexOf("\\") + 1);
    }
    ext = file.slice(file.indexOf(".")).toLowerCase();
    for (var i = 0; i < extArray.length; i++) 
    {
        if (extArray[i] == ext) 
        { 
            allowSubmit = true; 
            break; 
        }
    }
    if (allowSubmit) return true; //NOT form.submit()
    else
    {
        alert("Please only upload images that end in types:  " 
        + (extArray.join("  ")) + "\nPlease select a new "
        + "file to upload and submit again.");
        return false;
    }
}
I don't know if i changed anything, but best to be safe.
checkAllFields should be:
Code: 
function checkAllFields(upform)
{
   var numFields=5;  //number of form fields
   alert(numFields);
   var allFine=true;
   for (var i=1;i<=numFields;i++)
   {
      var string=upform+".uploadfile"+i+".value";
      alert(string);
      var field=eval(string);
      alert(field);
      if (!eval("LimitAttach(\""+field+"\")"))
         allFine=false;
   }
   return allFine;
}
and change the onSubmit to be:
Code: 
onSubmit="return checkAllFields('window.document.upform');"

that works for me

--Chessbot
 
Upvote 0 Downvote
oops...left alerts in
checkAllFields should be
Code: 
function checkAllFields(upform)
{
   var numFields=5;  //number of form fields
   var allFine=true;
   for (var i=1;i<=numFields;i++)
   {
      var string=upform+".uploadfile"+i+".value";
      var field=eval(string);
      if (!eval("LimitAttach(\""+field+"\")"))
         allFine=false;
   }
   return allFine;
}

--Chessbot
 
Upvote 0 Downvote
Chessbot,

That worked! Thanks so much - i will try to return the favor to someone else.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
901
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
805
malpa
malpa
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
1K
MDGarcia
MDGarcia
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
716
coldbohemia
coldbohemia
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
546
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top