记录——全浏览器兼容的图片上传插件

骑猪看日落 2022-06-10 11:06 126阅读 0赞

这几天写的一个支持全浏览器的图片上传插件

// 预览图片
    (function($) {  
        jQuery.fn.extend({  
            uploadPreview: function(opts) {  
                opts = jQuery.extend({  
                    width: 0,  
                    height: 0,  
                    imgDiv: "#imgDiv",  
                    maxSize:2024,  
                    imgType: ["gif", "jpeg", "jpg", "bmp", "png"],  
    				zoomIn:function(){},
    				zoomOut:function(){
    					$(this).width(opts.width);
    					$(this).height(opts.height);
    					if(opts.marginLeft)
    						$(this).css("margin-left",opts.marginLeft);
    					else 
    						$(this).css("margin-left","");
    					$(this).css("margin-top","");
    				},
                    callback: function() { return false; }
                }, opts || {});  
    
                var _this = $(this);  
                var imgDiv = $(opts.imgDiv); 
    
                imgDiv.width(opts.width);  
                imgDiv.height(opts.height);  
                   
                var version = parseInt($.browser.version,10);   
    			
                _this.change(function() {  
                      
                    if (this.value) {  
                        if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {  
                            alert("图片类型必须是" + opts.imgType.join("，") + "中的一种");  
                            this.value = "";  
                            return false;  
                        }  
                        
                        if ($.browser.msie && version < 10) {  
                            // chrome
                            if (version == 6) {  
                                
    							opts.version = "chrome";
    							
                                var image = new Image();  
    							image.id="imgPreviewEl";
                                image.onload = function(){  
                                    if( (image.fileSize/1024) > opts.maxSize) {  
                                        alert('图片大小不能超过'+opts.maxSize+'K');  
                                        return false;  
                                    }  
                                }  
    							
                                image.src = 'file:///' + this.value;  
    							
    							var img = $("<img />");  
    							opts.el = img;
                                img.attr('src', image.src);
    							img.width(opts.width);  
    							img.height(opts.height);  
    							img.mouseover(bind(opts.zoomIn,opts));
    							img.mouseleave(opts.zoomOut);
    							
    							imgDiv.html(img);
    							
    							opts.callback();
                            }  
    						// ie浏览器
    						else {  
                                  
    							opts.version = "ie";  
    							  
                                this.select();  
                                var img = document.selection.createRange().text;  
                                var image = new Image();  
    
                                image.onload = function(){  
                                    if( (image.fileSize/1024) > opts.maxSize) {  
                                        alert('图片大小不能超过'+opts.maxSize+'K');  
                                        return false;  
                                    }  
                                }  
    							
    							opts.marginLeft = imgDiv.css("margin-left");
    							
    							opts.el = imgDiv;
    							
    							imgDiv.mouseover(bind(opts.zoomIn,opts));
    							imgDiv.mouseleave(opts.zoomOut);
    
                                imgDiv.html('');                              
                                imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" });                           
                                try {  
                                    imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img;  
    								opts.callback();
                                } catch (e) {  
                                    alert("无效的图片文件！");  
                                    return;  
                                }                                                      
                            }  
                        }  
    					// 火狐浏览器
                        else {  
                            try{     
    						
    							opts.version = "firefox";
    						
                                var file = null;  
                                var size = 0;  
                                if(this.files && this.files[0] ){  
                                    file = this.files[0];   
                                    size = file.size;  
                                }else if(this.files && this.files.item(0)) {                                  
                                    file = this.files.item(0);     
                                    size = file.fileSize;  
                                }   
       
                                if((size/1024) > opts.maxSize){  
                                    alert('图片大小不能超过'+opts.maxSize+'K');  
                                    return false;  
                                }  
                                  
    							var img = $("<img />");  
    							opts.el = img;
    							img.width(opts.width);  
    							img.height(opts.height);  
    							imgDiv.mouseover(bind(opts.zoomIn,opts));
    							img.mouseleave(opts.zoomOut);
    							imgDiv.html(img);
                                //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
                                try{  
                                    //Firefox7.0 以下                               
                                    img.attr('src', file.getAsDataURL());  
                                }catch(e){  
                                    //Firefox8.0以上                                
                                    img.attr('src', window.URL.createObjectURL(file));  
                                }  
                                  
                                img.css({ "vertical-align": "middle" });  
    							opts.callback();
                            }catch(e){                            
                                //支持html5的浏览器,比如高版本的firefox、chrome、ie10  
                                if (this.files && this.files[0]) {                            
                                    if((this.files[0].size/1024) > opts.maxSize){  
                                        alert('图片大小不能超过'+opts.maxSize+'K');  
                                        return false;  
                                    }  
                                      
                                    var reader = new FileReader();   
                                    reader.onload = function (e) {                                        
                                        imgDiv.attr('src', e.target.result);    
                                    };  
                                    reader.readAsDataURL(this.files[0]);   
    								opts.callback();
                                }    
                            };  
                        }  
                    }  
                });  
            }  
        });  
    })(jQuery);

用法举例：

$("#businessLicenseImg").uploadPreview({ width: 70, height: 100, imgDiv: "#imgPreview" , 
    		zoomIn:function(){
    				$(this.el).width(350);
    				$(this.el).height(500);
    				if(this.version=="ie"){
    					$(this.el).css("margin-left","50px");
    					$(this.el).css("margin-top","-180px");
    				}
    				else{
    					$(this.el).css("margin-left","-70px");
    					$(this.el).css("margin-top","-180px");
    				}
    		},
    		callback:function(){
    			$('#isDel').val("0");
    			$('#imgDel').show();
    		}});