小虎博客

A-A+

JS中INPUT上传文件类型限制代码

2016年10月15日 编程技术 暂无评论

我们利用input上传文件时，希望用户在客户提交之前就提示它只能上传我们规定的文件，如：只能上传gif,jpg等图片文件，当用户点击时就是这类文件就给出提示,在客户端进行验证,代码如下:

  1. <script   Language="JavaScript"   Type="text/javascript"> <!--  
  2. function   picForm_Validator(myform)  
  3. {  
  4. if(document.all.file1.value=="")  
  5.         {  
  6.                 alert("请选择上传的照片！");  
  7.                 myform.mfile.focus();  
  8.                 return   false;  
  9.         }  
  10.         var   last=document.all.file1.value.match(/^(.*)(.)(.{1,8})$/)[3];   //检查上传文件格式  
  11.         lastlast=last.toUpperCase();  
  12.         if(last=="GIF"   ||   last=="JPG"){    
  13.         }  
  14.         else  
  15.         {  
  16.                 alert("只能上传.GIF   或.JPG   文件,请重新选择！");  
  17.                 return   false;  
  18.                 }  
  19.         return   true;  
  20. }  
  21. //-->  
  22. </script>  
  23. <form  method="POST" enctype="multipart/form-data"   action="xx.action"   onsubmit="return   picForm_Validator(this)">  
  24. <input   name="file1"   type="file"   class="style4"   value=""   size="40">  
  25. <input   type="submit"   value="上传"   name="B1"   class="s02">  
  26. </form>  

例2,代码如下:

  1. <SCRIPT language="JavaScript">  
  2. <!-- Hide script from older browsers  
  3.    
  4. extArray = new Array(".gif", ".jpg", ".png");  
  5.    
  6. function LimitAttach(form, file) {  
  7. allowSubmit = false;  
  8. if (!file) return;  
  9. while (file.indexOf("\") != -1)  
  10. filefile = file.slice(file.indexOf("\") + 1);  
  11. ext = file.slice(file.indexOf(".")).toLowerCase();  
  12. for (var i = 0; i < extArray.length; i++) {  
  13. if (extArray[i] == ext) { allowSubmit = true; break; }  
  14. }  
  15. if (allowSubmit) form.submit();  
  16. else  
  17. alert("Please only upload files that end in types:  "  
  18. + (extArray.join("  ")) + "nPlease select a new "  
  19. + "file to upload and submit again.");  
  20. }  
  21. //  End -->  
  22. </script>  
  23. <form method="POST" action="newphoto.asp" enctype="multipart/form-data" id=form1 name=form1>  
  24. <input type="file" name="UploadForm" size="30"><BR><BR>  
  25. <input type="button" name="submit" value="Upload Your Photo!" onclick="LimitAttach(this.form, this.form.UploadForm.value)">  
  26.  //xiaohuboke.com  
  27. ———————————————————  
  28. <form onsubmit= "return a(this) ">  
  29. <input type=file name=f>  
  30. <input type=submit>  
  31. </form>  

例3,原理简单就是获取上传文件的字符，然后正则表达式判断是不是指定文件,代码如下:

  1. <input type="file" onchange="checkExt(this)"/>  
  2. <script >   
  3. var checkExt=function(file) {  
  4.     if(!(/(?:jpg|gif)$/i.test(file.value))) {  
  5.         alert("只允许上传jpg和gif的图片");  
  6.         if(window.ActiveXObject) {//for IE  
  7.             file.select();//select the file ,and clear selection  
  8.             document.selection.clear();  
  9.         } else if(window.opera) {//for opera  
  10.             file.type="text";file.type="file";  
  11.         } else file.value="";//for FF,Chrome,Safari  
  12.     } else {  
  13.         alert("ok");//or you can do nothing here.  
  14.     }//xiaohuboke.com  
  15. };  
  16. </script>  

个人比较喜欢最后一种，他可以判断浏览器类哦，兼容性也相对强不少了.

标签：

给我留言