夏日博客

A-A+

js验证上传文件扩展名方法收藏

2016年10月16日 前端设计 暂无评论 阅读 6 views 次

js验证用户上传文件类型以及时反应上传的文件是不是我们允许的，从而减少了在用户提交到服务器时才给出提示，实现原理是利用str.split以.分开，然后我们判断数组中的文件后缀名是不是我们允许上传的，下面给大家几个实例。

实例1,只能上传jpg图片文件实例,代码如下:

  1. <form action="*.jsp" method="post" onsubmit="return check()">   
  2. <input type="file" name="file">   
  3. <input type="submit" value="上传">   
  4. </form>  
  5.   
  6. //js代码:  
  7.   
  8. function check2()   
  9. {   
  10. var file = document.getElementsByName("file").value;   
  11. if(file=="")   
  12. {   
  13. alert("请选择文件");   
  14. return false;   
  15. }   
  16. var strTemp = file.split(".");   
  17. var strCheck = strTemp[strTemp.length-1];   
  18. if(strCheck.toUpperCase()=='JPG')   
  19. {   
  20. return true;   
  21. }else   
  22. {   
  23. alert('上传文件类型不对！');   
  24. return false;   
  25. }   
  26. }  

验证上传文件的扩展名,代码如下:

  1. <input type="file" name="file" id="file" onChange="checkFileName(this)">  
  2.  function checkFileName(id) {  
  3.      var okText = /txt|jpg|xml|zip/i;//这里是允许的扩展名  
  4.      var filename = id.value;//得到当前file文件域的值  
  5.      var newFileName = filename.split('.'); //这是将文件名以点分开,因为后缀肯定是以点什么结尾的.  
  6.      newFileName = newFileName[newFileName.length-1];//这个是得到文件后缀,因为split后是一个数组所以最后的那个数组就是文件的后缀名.newFileName.length为当前的长度，-1则为后缀的位置，因为是从0开始的  
  7.      //开始检查后缀  
  8.      if (newFileName.search(okText) == -1) {//search如果没有刚返回-1.这个如果newFileName在okText里没有,则为不允许上传的类型. .  
  9.          var err=okText.toString();//将正则转为字符  
  10.          var errText=err.replace(/^/|/+(.*)/g,"");//用正则替换 / 开头和 /i结束  
  11.          var errText=errText.replace(/|/g,",");//用正则把 | 替换成 ,  
  12.          alert("请上传为"+errText+"的文件");//提示  
  13.          return;  
  14.      }  
  15.  }  

上面的方法都可扩展性比较差，下面我来介绍一个可展示性超强的代码:

  1. <SCRIPT LANGUAGE="JavaScript">  
  2. <!--  
  3. // 去左空格  
  4. function ltrim(s){   
  5. return s.replace( /^s*/, "");   
  6. }  
  7. // 去右空格  
  8. function rtrim(s){   
  9. return s.replace( /s*$/, "");   
  10. }  
  11. // 去左右空格  
  12. function trim(s){   
  13. return rtrim(ltrim(s));   
  14. }  
  15. //获取文件扩展名  
  16. function get_ext(f_path){  
  17. var ext = '';  
  18. if(f_path != null && trim(f_path).length > 0){  
  19.    f_path = trim(f_path);  
  20.    ext = f_path.substring(f_path.lastIndexOf(".") + 1, f_path.length);  
  21. }  
  22. return ext;  
  23. }  
  24. //验证文件扩展名  
  25. function chk_ext(f_path){  
  26. var ext = get_ext(f_path);  
  27. //根据需求定制  
  28. var accept_ext = new Array("doc", "pdf", "bpm", "jpeg", "jpg", "gif", "ppt", "xls");  
  29. var flag = false;  
  30. if(ext != ''){  
  31.    for(var i=0; i<accept_ext.length; i++){  
  32.     if(ext == accept_ext[i])  
  33.      flag = true;  
  34.    }  
  35. }  
  36. return flag;  
  37. }  
  38. //-->  
  39. </SCRIPT>  
标签：

给我留言