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

这里的技术是共享的

You are here

jquery判断图片上传的类型和大小

1. 参考文章:jQuery 判断文件上传类型,我稍微修改了一下,用来做图片的上传判断。

代码如下:

[javascript] view plain copy
  1. <span style="font-size:14px;"><span style="white-space:pre">    </span><span style="font-family:Arial;">$("#picture").live('change',function(){  

  2.                 var rightFileType = new Array('jpg''bmp''gif''png''jpeg');  

  3.                 var fileType = $(this).val().substring($(this).val().lastIndexOf('.') + 1);  

  4.                 if (!PROJECT.inArray(fileType.toLowerCase(), rightFileType)) {  

  5.                     this.outerHTML += '';  

  6.                     this.value ="";  

  7.                     alert("只支持图片文件上传!");  

  8.                 }  

  9.                 alert(1)  

  10.                 var file_size = 0;  

  11.                 if ( $.browser.msie && !this.files ) {  

  12.                     var file_path = this.value;  

  13.                     var file_system = new ActiveXObject("Scripting.FileSystemObject");  

  14.                     var file = file_system.GetFile (file_path);  

  15.                     file_size = file.Size;  

  16.                     alert(file_size/1024/1024 + " MB");  

  17.                 } else {  

  18.                     file_size = this.files[0].size;  

  19.                     console.log(file_size/1024/1024 + " MB");  

  20.                 }  

  21.                 var size = file_size / 1024;  

  22.                 if(size > 300){  

  23.                     alert("上传的文件大小不能超过10M!");  

  24.                 }  

  25.   

  26.             });  

  27.   

  28.         },  

  29.   

  30.     inArray: function(needle, haystack) {  

  31.         var type = typeof needle;  

  32.         if(type == 'string' || type =='number') {  

  33.             for(var i in haystack) {  

  34.                 if(haystack[i] == needle) {  

  35.                     return true;  

  36.                 }  

  37.             }  

  38.         }  

  39.         return false;  

  40.     },</span></span>  

[html] view plain copy
  1. 2. html  

[html] view plain copy
  1. <span style="font-family:Arial;font-size:14px;"><span style="white-space:pre">      </span><div class="controls">  

  2.                         <input id="picture" type="file" size="45" name="picture" class="input">  

  3.                         <button class="btn btn-default" type="button" onclick="PROJECT.checkPictureExtension()">Upload</button>  

  4.                         <p class="help-block"></p>  

  5.                     </div></span>  


3. 判断图片的类型和大小最后的定型:


[javascript] view plain copy
  1. $("#picture").live('change',function(){  

  2.                 var rightFileType = new Array('jpg''bmp''gif''png''jpeg');  

  3.                 var fileType = $(this).val().substring($(this).val().lastIndexOf('.') + 1);  

  4.                 var file_size = this.files[0].size;  

  5.                 alert(this.files[0].size + '--' + this.files[0].type + '--' + this.files[0].name + '--');  

  6.                 if (!PROJECT.inArray(fileType.toLowerCase(), rightFileType)) {  

  7.                     this.outerHTML += '';  

  8.                     this.value ="";  

  9.                     $('.help-block').css('color''red').html("只支持图片文件上传!");  

  10.                 } else {  

  11.                     var size = file_size / 1024;  

  12.                     if(size > 300){  

  13.                         this.outerHTML += '';  

  14.                         this.value ="";  

  15.                         $('.help-block').css('color''red').html("上传的文件大小不能超过10M!");  

  16.                     } else {  

  17.                         $('.help-block').html('');  

  18.                     }  

  19.                 }  

  20.             });  

  21.   

  22.         },  

  23.   

  24.   

  25.     inArray: function(needle, haystack) {  

  26.         var type = typeof needle;  

  27.         if(type == 'string' || type =='number') {  

  28.             for(var i in haystack) {  

  29.                 if(haystack[i] == needle) {  

  30.                     return true;  

  31.                 }  

  32.             }  

  33.         }  

  34.         return false;  

  35.     },  




[html] view plain copy
  1. <div class="controls">  

  2.                         <input id="picture" type="file" size="45" name="picture" class="input">  

  3.                         <button class="btn btn-default" type="button" onclick="PROJECT.uploadPicture(this)">Upload</button>  

  4.                         <p class="help-block"></p>  

  5.                     </div>  





来自 https://blog.csdn.net/zhaoyingjiao/article/details/40822125

普通分类: