现在的位置: 首页 > 综合 > 正文

query 图片上传前预览,支持ie6+、firefox、chrome

2018年05月05日 ⁄ 综合 ⁄ 共 8338字 ⁄ 字号 评论关闭

转自 : http://sundoctor.iteye.com/blog/1943278

项目需要图片上传前预览,网上找了他人写的一个jquery插件,因为作者写的时间较早,浏览器的更新换代很快,我改改了,增强浏览器版本兼容性,支持ie6+、firefox、chrome。 

插件代码: 

Java代码  收藏代码
  1. //说明:图片上传预览插件  
  2. //上传的时候可以生成固定宽高范围内的等比例缩放图  
  3.   
  4. //参数设置:  
  5. //width                     存放图片固定大小容器的宽  
  6. //height                    存放图片固定大小容器的高  
  7. //imgDiv                    页面DIV的JQuery的id  
  8. //maxSize                   图片大小最大限制(K)  
  9. //imgType                   数组后缀名  
  10. //**********************图片上传预览插件*************************  
  11. (function($) {  
  12.     jQuery.fn.extend({  
  13.         uploadPreview: function(opts) {  
  14.             opts = jQuery.extend({  
  15.                 width: 0,  
  16.                 height: 0,  
  17.                 imgDiv: "#imgDiv",  
  18.                 maxSize:300,  
  19.                 imgType: ["gif""jpeg""jpg""bmp""png"],  
  20.                 callback: function() { return false; }  
  21.             }, opts || {});  
  22.             //var _self = this;  
  23.             var _this = $(this);  
  24.             var imgDiv = $(opts.imgDiv);  
  25.             imgDiv.width(opts.width);  
  26.             imgDiv.height(opts.height);  
  27.                
  28.             var version = parseInt($.browser.version,10);  
  29.               
  30.             autoScaling = function() {  
  31.                   
  32.                 if (version == 7 || version == 8  || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";  
  33.                 var img_width = imgDiv.width();  
  34.                 var img_height = imgDiv.height();  
  35.                 if (img_width > 0 && img_height > 0) {  
  36.                     var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;  
  37.                     if (rate <= 1) {  
  38.                         if (version == 7 || version == 8  || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";  
  39.                         imgDiv.width(img_width * rate);  
  40.                         imgDiv.height(img_height * rate);  
  41.                     } else {  
  42.                         imgDiv.width(img_width);  
  43.                         imgDiv.height(img_height);  
  44.                     }  
  45.                     var left = (opts.width - imgDiv.width()) * 0.5;  
  46.                     var top = (opts.height - imgDiv.height()) * 0.5;  
  47.                     imgDiv.css({ "margin-left": left, "margin-top": top });  
  48.                     imgDiv.show();  
  49.                 }  
  50.             },  
  51.               
  52.             createImg = function(){  
  53.                 imgDiv.html('');  
  54.                   
  55.                 var img = $("<img />");  
  56.                 imgDiv.replaceWith(img);  
  57.                 imgDiv = img;  
  58.             },  
  59.      
  60.             _this.change(function() {  
  61.                   
  62.                 if (this.value) {  
  63.                     if (!RegExp("\.(" + opts.imgType.join("|") + ")$""i").test(this.value.toLowerCase())) {  
  64.                         alert("图片类型必须是" + opts.imgType.join(",") + "中的一种");  
  65.                         this.value = "";  
  66.                         return false;  
  67.                     }  
  68.                     imgDiv.hide();  
  69.                     if ($.browser.msie && version < 10) {  
  70.                           
  71.                         if (version == 6) {  
  72.                               
  73.                             var image = new Image();  
  74.                             image.onload = function(){  
  75.                                 if( (image.fileSize/1024) > opts.maxSize) {  
  76.                                     alert('图片大小不能超过'+opts.maxSize+'K');  
  77.                                     return false;  
  78.                                 }  
  79.                             }  
  80.                             image.src = 'file:///' + this.value;  
  81.   
  82.                             createImg();  
  83.                             imgDiv.attr('src', image.src);  
  84.                             autoScaling();  
  85.                         }  else {  
  86.                               
  87.                             this.select();  
  88.                             var img = document.selection.createRange().text;  
  89.                             var image = new Image();  
  90.                             image.onload = function(){  
  91.                                 if( (image.fileSize/1024) > opts.maxSize) {  
  92.                                     alert('图片大小不能超过'+opts.maxSize+'K');  
  93.                                     return false;  
  94.                                 }  
  95.                             }  
  96.                             image.src = img;                              
  97.                               
  98.                             imgDiv.html('');                              
  99.                             imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });  
  100.                             imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";                             
  101.                               
  102.                             try {  
  103.                                 imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img;  
  104.                             } catch (e) {  
  105.                                 alert("无效的图片文件!");  
  106.                                 return;  
  107.                             }                              
  108.                               
  109.                             setTimeout("autoScaling()"100);                              
  110.                         }  
  111.                     }  
  112.                     else {  
  113.                         try{     
  114.                             var file = null;  
  115.                             var size = 0;  
  116.                             if(this.files && this.files[0] ){  
  117.                                 file = this.files[0];   
  118.                                 size = file.size;  
  119.                             }else if(this.files && this.files.item(0)) {                                  
  120.                                 file = this.files.item(0);     
  121.                                 size = file.fileSize;  
  122.                             }   
  123.    
  124.                             if((size/1024) > opts.maxSize){  
  125.                                 alert('图片大小不能超过'+opts.maxSize+'K');  
  126.                                 return false;  
  127.                             }  
  128.                               
  129.                             createImg();  
  130.                               
  131.                             //Firefox 因安全性问题已无法直接通过input.value 获取完整的文件路径  
  132.                             try{  
  133.                                 //Firefox7.0 以下                               
  134.                                 imgDiv.attr('src', file.getAsDataURL());  
  135.                             }catch(e){  
  136.                                 //Firefox8.0以上                                
  137.                                 imgDiv.attr('src', window.URL.createObjectURL(file));  
  138.                             }  
  139.                               
  140.                             imgDiv.css({ "vertical-align""middle" });  
  141.                             setTimeout("autoScaling()"100);  
  142.                         }catch(e){                            
  143.                             //支持html5的浏览器,比如高版本的firefox、chrome、ie10  
  144.                             if (this.files && this.files[0]) {                            
  145.                                 if((this.files[0].size/1024) > opts.maxSize){  
  146.                                     alert('图片大小不能超过'+opts.maxSize+'K');  
  147.                                     return false;  
  148.                                 }  
  149.                                   
  150.                                 var reader = new FileReader();   
  151.                                 reader.onload = function (e) {                                        
  152.                                     imgDiv.attr('src', e.target.result);    
  153.                                 };  
  154.                                 reader.readAsDataURL(this.files[0]);   
  155.                                 setTimeout("autoScaling()"100);  
  156.                             }    
  157.                         };  
  158.                     }  
  159.                 }  
  160.             });  
  161.         }  
  162.     });  
  163. })(jQuery);  

插件使用: 

Java代码  收藏代码
  1. <div style="width:90px; height:110px; overflow:hidden; border:1px solid red;">  
  2. <div id="imgDiv"> </div>  
  3. </div>  
  4. <br>  
  5. <input type="file" value="上传文件">  
  6.   
  7. <script>  
  8. $(document).ready(function() {    
  9.      $("input").uploadPreview({ width: 90, height: 110, imgDiv: "#imgDiv"});  
  10. });  
  11. </script>  

抱歉!评论已关闭.