js验证上传图片的方法

这篇文章主要介绍了js验证上传图片的方法,可对上传图片的类型、大小等进行限制,非常简单实用,需要的朋友可以参考下

本文实例讲述了js验证上传图片的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>js验证图片</title> 
7. <script> 
8. UpLoadFileCheck=function() 
9. {  
10. this.AllowExt=".jpg,.gif"; 
11. //允许上传的文件类型 0为无限制 
12. //每个扩展名后边要加一个"," 小写字母表示  
13. this.AllowImgFileSize=0; 
14. //允许上传文件的大小 0为无限制 单位：KB  
15. this.AllowImgWidth=0; 
16. //允许上传的图片的宽度 0为无限制　单位：px(像素)  
17. this.AllowImgHeight=0; 
18. //允许上传的图片的高度 0为无限制　单位：px(像素)  
19. this.ImgObj=new Image(); 
20. this.ImgFileSize=0; 
21. this.ImgWidth=0; 
22. this.ImgHeight=0; 
23. this.FileExt=""; 
24. this.ErrMsg=""; 
25. this.IsImg=false;//全局变量 
26. } 
27. UpLoadFileCheck.prototype.CheckExt=function(obj) 
28. { 
29. this.ErrMsg="";  
30. this.ImgObj.src=obj.value;  
31. //this.HasChecked=false;  
32. if(obj.value=="") 
33. { 
34. this.ErrMsg="/n请选择一个文件";  
35. } 
36. else 
37. {  
38. this.FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();  
39. if(this.AllowExt!=0&&this.AllowExt.indexOf(this.FileExt)==-1) 
40. //判断文件类型是否允许上传  
41. {  
42. this.ErrMsg="/n该文件类型不允许上传。请上传 "+this.AllowExt+" 类型的文件，当前文件类型为"+this.FileExt;  
43. } 
44. }  
45. if(this.ErrMsg!="")  
46. { 
47. this.ShowMsg(this.ErrMsg,false);  
48. return false; 
49. } 
50. else 
51. return this.CheckProperty(obj);  
52. } 
53. UpLoadFileCheck.prototype.CheckProperty=function(obj) 
54. { 
55. if(this.ImgObj.readyState!="complete")// 
56. {  
57. sleep(1000);//一秒使用图能完全加载  
58. }  
59. if(this.IsImg==true) 
60. { 
61. this.ImgWidth=this.ImgObj.width; 
62. //取得图片的宽度  
63. this.ImgHeight=this.ImgObj.height; 
64. //取得图片的高度 
65. if(this.AllowImgWidth!=0&&this.AllowImgWidth<this.ImgWidth)  
66. this.ErrMsg=this.ErrMsg+"/n图片宽度超过限制。请上传宽度小于"+this.AllowImgWidth+"px的文件，当前图片宽度为"+this.ImgWidth+"px";  
67. if(this.AllowImgHeight!=0&&this.AllowImgHeight<this.ImgHeight)  
68. this.ErrMsg=this.ErrMsg+"/n图片高度超过限制。请上传高度小于"+this.AllowImgHeight+"px的文件，当前图片高度为"+this.ImgHeight+"px";  
69. } 
70. this.ImgFileSize=Math.round(this.ImgObj.fileSize/1024*100)/100; 
71. //取得图片文件的大小  
72. if(this.AllowImgFileSize!=0&&this.AllowImgFileSize<this.ImgFileSize)  
73. this.ErrMsg=this.ErrMsg+"/n文件大小超过限制。请上传小于"+this.AllowImgFileSize+"KB的文件，当前文件大小为"+this.ImgFileSize+"KB";  
74. if(this.ErrMsg!="")  
75. { 
76. this.ShowMsg(this.ErrMsg,false);  
77. return false; 
78. } 
79. else 
80. return true;  
81. }  
82. UpLoadFileCheck.prototype.ShowMsg=function(msg,tf) 
83. //显示提示信息 tf=false 显示错误信息 msg-信息内容  
84. {  
85. /*msg=msg.replace("/n","<li>");  
86. msg=msg.replace(//n/gi,"<li>");  
87. */ 
88. alert(msg); 
89. } 
90. function sleep(num)  
91. {  
92. var tempDate=new Date();  
93. var tempStr="";  
94. var theXmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );  
95. while((new Date()-tempDate)<num )  
96. {  
97. tempStr+="/n"+(new Date()-tempDate);  
98. try{  
99. theXmlHttp .open( "get", "about:blank?JK="+Math.random(), false );  
100. theXmlHttp .send();  
101. }  
102. catch(e){;}  
103. }  
104. //containerDiv.innerText=tempStr;  
105. return;  
106. }  
107. function c(obj) 
108. { 
109. var d=new UpLoadFileCheck();  
110. d.IsImg=true; 
111. d.AllowImgFileSize=100; 
112. d.CheckExt(obj) 
113. } 
114. </script> 
115. </head> 
116. <body> 
117. <input name="" type="file" onchange="c(this)"/> 
118. </body> 
119. </html> 

希望本文所述对大家的javascript程序设计有所帮助。