Image file size and content type validation in javascript

Question

Hi,

I need to do image file validation in javascript...

I am using asp.net file upload control to select an image file....here i want to validate selected image file ( i.e., image file extension,size in bytes,content type) at client side using javascript.
I have validated image file name extension (Ex : .jpg,jpeg etc),but I didn't find any solution to validate its size and content type in javascript.

Note: I can validate size using ActiveX object, but I am not going for that b'coz of browser issues.

I have tried the same in different way using Ajax.I wrote a method (Image validation method),  which takes fileupload control object as its parameter,in codebehind file and tried to call this method from clent side using ajax.But I am unable to invoke that server side method by passing fileupload object from clentside method.

Can you please provide the solution either using javascript or ajax....

Thanks in advance.

Regards
Lavanya

Answer 1

Hi Lavanya,

Check this script, it may be sufficient for your requirement.

function load_image()

{

var imgpath = document.getElementById('fupImage').value;

if(imgpath != "")

{

// code to get File Extension..

var arr1 = new Array;

arr1 = imgpath.split("\\");

var len = arr1.length;

var img1 = arr1[len-1];

var filext = img1.substring(img1.lastIndexOf(".")+1);

// Checking Extension

if(filext == "jpg" || filext == "jpeg" || filext == "gif" || filext == "bmp")

document.getElementById('imgUser').src = imgpath;

else

{

alert("Invalid File Format Selected");

document.getElementById('fupImage').value = "";

return false;

}

}

}

---

potta vijay kumar

Answer 2

Hi there

The reply above is excellent.

My personal solution was to use:

	// get the file name; extract the name part only; check for valid extensions 
	cv_name = document.getElementById('cv-name').value; 
	cv_name = encodeURI(cv_name);
	cv_name = cv_name.toLowerCase();
	cv_name = cv_name.split("%5c");
	cv_name_length = cv_name.length - 1;
	cv_name = cv_name[cv_name_length];
	cv_name = decodeURI(cv_name);
			
	cv_name_check = cv_name.split(".");
	cv_name_check_length = cv_name_check.length - 1;
			
	if (cv_name_check[cv_name_check_length] == "doc" || cv_name_check[cv_name_check_length] == "txt" || cv_name_check[cv_name_check_length] == "pdf")
	{
		document.getElementById('upload-cv-name').value = cv_name
	}
	else
	{
		alert('Sorry, we can only accept CVs in .DOC, .TXT or .PDF format. Please try a different file.')
				
		// reset cv_name
		cv_name = 'null'
	}

But.............the solution recommended above is better!

Andrew

Answer 3

Hi Vijay Kumar

I have done my upload form throw a friend, he is not in contact with me right now

I need this form to be fully validate, you will found there is only file type validation
http://makemycreative.in/pages/startorder3.asp

In File1 menu -
File type validation should be = all text file e.g. .doc, .txt etc
& file size upto 200kb

In File2 menu -

File type validation should be = .psd, .png, .jpeg, .tiff, .bmp, .pdf, .cdr, .eps.
file size max 5mb , min 500kb



"This is Javascript"

<script language="JavaScript">

function validate()
    {
var doc=document.frm;
if (doc.File1.value=="")
{
alert("Please upload Text write up");
doc.File1.focus();return false;}
else
{
if (doc.File1.value.lastIndexOf(".doc")==-1) {
alert("Please upload only doc");doc.File1.focus(); return false;}
}



if (doc.File2.value=="")
{
alert("Please upload Image files");doc.File2.focus();return false;}
else
{
if ((doc.File2.value.lastIndexOf(".jpg")==-1) && (doc.File2.value.lastIndexOf(".gif")==-1) && (doc.File2.value.lastIndexOf(".bmp")==-1) )
{alert("Please upload only jpg, gif, bmp files");doc.File2.focus(); return false;}
}


if (doc.Name.value=="") {alert("Please enter name");doc.Name.focus();return false;}
        if (doc.Email.value=='') { alert('Please enter your email id.'); doc.Email.focus(); return false; }
        if (doc.Email.value.indexOf('@')==-1 || doc.Email.value.indexOf('.')==-1 || doc.Email.value.indexOf(' ')!=-1 || doc.Email.value.lastIndexOf('@')>doc.Email.value.lastIndexOf('.') || doc.Email.value.indexOf('@')!=doc.Email.value.lastIndexOf('@') || doc.Email.value.length-doc.Email.value.lastIndexOf('.')<3){ alert('This email id does not appear to be a valid one.'); doc.Email.focus(); return false; }

if (doc.Contact.value=="") {alert("Please enter Contact");doc.Contact.focus();return false;}
var phoneval=doc.Contact.value;
if (isNaN(phoneval))
{alert("Please enter a numeric phone number");doc.Contact.focus(); return false;}

}
<!--

var message="";

function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// -->
        </script>

Please help me.


Prachi Sharma
[e-mail]
MakeMeCreative