Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Validate input type="file"

Posted on 2005-04-18
13
Medium Priority
?
1,067 Views
Last Modified: 2012-06-27
Hello, I have two file inputs and would like to:

1) validate that they are not empty when submitted
2) validate that they are only jpg or jpeg
3) make sure they aren't greater than, say, 200k

Sorry for the small points but is all I have. Thanks!
0
Comment
Question by:yourbudweiser
  • 8
  • 5
13 Comments
 
LVL 25

Expert Comment

by:archrajan
ID: 13807037
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function doit()
{
var frm = document.frm.elements
for(i=0; i <frm.length;i++)
{
if(frm[i].type == 'file')
{

if(frm[i].value.length < 2)
{
alert("Please do not leave blank");
return false;
}
var temp = frm[i].value.split('.')[1]
//alert(temp)

if(temp.toLowerCase() != 'jpg' && temp.toLowerCase() != 'jpeg')
{
alert('Invalid file format')
return false;
}
}

}
}
</script>
</HEAD>

<BODY>
<form name = "frm">
<INPUT TYPE = "file">
<INPUT TYPE = "file">

<INPUT TYPE = "submit" value = "upload" onclick = "return doit();">

</form>
</BODY>
</HTML>
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13807093
And its not possible with client side scripting to check file size

But with some active x it will be possible,
for a possible solution refer this:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20765620.html
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 13807170
this looks very good, thanks. is there a way to set the focus to the file input if return false?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Accepted Solution

by:
archrajan earned 200 total points
ID: 13807194
sure change the function to this one:
function doit()
{
var frm = document.frm.elements
for(i=0; i <frm.length;i++)
{
if(frm[i].type == 'file')
{

if(frm[i].value.length < 2)
{
alert("Please do not leave blank");
frm[i].focus();
return false;
}
var temp = frm[i].value.split('.')[1]
//alert(temp)

if(temp.toLowerCase() != 'jpg' && temp.toLowerCase() != 'jpeg')
{
alert('Invalid file format')
frm[i].select();
frm[i].focus();
return false;
}
}

}
}
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 13807216
great! thanks alot.
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13807219
Thanks for the points and the grade :)
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 13816851
Hi archrajan, after working with this script, I noticed a small bug:

if no file extension is entered in the file input field, then both tests fail. you can put 123 in the first input field and then form submits.

Can you please post a correction?

Thanks alot.
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13816915
sure... i wud have a look
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13816986
<script>
function doit()
{
var frm = document.frm.elements
for(i=0; i <frm.length;i++)
{
if(frm[i].type == 'file')
{

if(frm[i].value.length < 2 || frm[i].value.indexOf('.') == -1)
{
alert("Please do not leave blank");
frm[i].focus();
return false;
}
var temp = frm[i].value.split('.')[1]
//alert(temp)

if(temp.toLowerCase() != 'jpg' && temp.toLowerCase() != 'jpeg')
{
alert('Invalid file format')
frm[i].select();
frm[i].focus();
return false;
}
}

}
}
</script>
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 13817167
thanks for responding....

i would prefer to test for the extension when testing for the jpg if possible. can this be done?

0
 
LVL 25

Expert Comment

by:archrajan
ID: 13817220
Ok here u go:
<script>
function doit()
{
var frm = document.frm.elements
for(i=0; i <frm.length;i++)
{
if(frm[i].type == 'file')
{

if(frm[i].value.length < 2)
{
alert("Please do not leave blank");
frm[i].focus();
return false;
}
var temp = frm[i].value.split('.')[1]
//alert(temp)
if(temp == undefined)
{
alert("Invalid file format")
return false
}
if(temp.toLowerCase() != 'jpg' && temp.toLowerCase() != 'jpeg')
{
alert('Invalid file format')
frm[i].select();
frm[i].focus();
return false;
}
}

}
}
</script>
0
 
LVL 3

Author Comment

by:yourbudweiser
ID: 13817889
thanks again, i wish i had more points to give you !
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13817904
Thats ok, lets see next time :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question