欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

判断上传图片类型和大小

使用jQuery判断上传图片的类型和大小


[html] view plain copy
  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <meta charset="utf-8">  

  5. </head>  

  6. <body>  

  7. <form action="" method="">  

  8.     <input type="file" id="file" />  

  9. </form>  

  10. <p id="p_1">图片格式为:</p>  

  11. <p id="p_2">图片大小为:</p>  

  12. <script src="js/jquery-1.8.3.min.js"></script>  

  13. <script>  

  14. $(function(){  

  15.   

  16.     var p_1 = $('#p_1'),  

  17.         p_2 = $('#p_2');  

  18.   

  19.     $('body').on('change','#file',function(){  

  20.         var path = $(this).val(),  

  21.         extStart = path.lastIndexOf('.'),  

  22.         ext = path.substring(extStart,path.length).toUpperCase();  

  23.         //判断图片格式  

  24.         if(ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){  

  25.             alert('请上传正确格式的图片');  

  26.             resetFile();  

  27.             return false;  

  28.         }else{  

  29.             p_1.html('图片格式为:' + ext);  

  30.         }  

  31.         //获取图片大小,注意使用this,而不是$(this)  

  32.         var size = this.files[0].size / 1024;  

  33.         if(size > 10240){  

  34.             alert('图片大小不能超过10M');  

  35.             resetFile();  

  36.             return false;  

  37.         }else{  

  38.             p_2.html('图片大小为:' + size.toFixed(2) + 'KB');  

  39.         }  

  40.     })  

  41.   

  42.     //还原  

  43.     function resetFile(){  

  44.         //清空file表单的值,不能直接使用$('#file').val('')这种写法  

  45.         $('form').html('<input type="file" id="file" />');  

  46.         p_1.html('图片格式为:');  

  47.         p_2.html('图片大小为:');  

  48.     }  

  49.   

  50. })  

  51. </script>  

  52. </body>  

  53. </html>  

lastIndexOf()方法从后向前检索指定字符串,如果出现了指定的字符,则返回该字符所在的位置,如果没有,返回-1,位置从0开始计数

toUpperCase()方法转换成大写字母

substring()方法截取字符串,第一个参数为开始的位置,第二个参数为结束的位置(如果省略,则默认会截取到字符串的结尾),与slice()和substr()方法不同的是,substring()不接受负的参数

slice()方法同substring()方法,区别是接受负的参数(若参数为负数,则从字符串尾部开始计算位置)

substr()方法截取字符串,第一个参数是开始的位置,第二个参数是截取的长度(不同于slice和substring),现已不建议使用


来自  https://blog.csdn.net/kongjunchao159/article/details/50847158

普通分类: