jquery 图片上传前预览，支持ie6+、firefox、chrome

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

插件代码：

//说明：图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图

//参数设置：
//width                     存放图片固定大小容器的宽
//height                    存放图片固定大小容器的高
//imgDiv                    页面DIV的JQuery的id
//maxSize					图片大小最大限制(K)
//imgType                   数组后缀名
//**********************图片上传预览插件*************************
(function($) {
    jQuery.fn.extend({
        uploadPreview: function(opts) {
            opts = jQuery.extend({
                width: 0,
                height: 0,
                imgDiv: "#imgDiv",
                maxSize:300,
                imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                callback: function() { return false; }
            }, opts || {});
            //var _self = this;
            var _this = $(this);
            var imgDiv = $(opts.imgDiv);
            imgDiv.width(opts.width);
            imgDiv.height(opts.height);
             
            var version = parseInt($.browser.version,10);
            
            autoScaling = function() {
            	
                if (version == 7 || version == 8  || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
                var img_width = imgDiv.width();
                var img_height = imgDiv.height();
                if (img_width > 0 && img_height > 0) {
                    var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;
                    if (rate <= 1) {
                        if (version == 7 || version == 8  || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";
                        imgDiv.width(img_width * rate);
                        imgDiv.height(img_height * rate);
                    } else {
                        imgDiv.width(img_width);
                        imgDiv.height(img_height);
                    }
                    var left = (opts.width - imgDiv.width()) * 0.5;
                    var top = (opts.height - imgDiv.height()) * 0.5;
                    imgDiv.css({ "margin-left": left, "margin-top": top });
                    imgDiv.show();
                }
            },
            
            createImg = function(){
        		imgDiv.html('');
        		
                var img = $("<img />");
                imgDiv.replaceWith(img);
                imgDiv = img;
            },
   
            _this.change(function() {
            	
                if (this.value) {
                    if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert("图片类型必须是" + opts.imgType.join("，") + "中的一种");
                        this.value = "";
                        return false;
                    }
                    imgDiv.hide();
                    if ($.browser.msie && version < 10) {
                    	
                        if (version == 6) {
                        	
                            var image = new Image();
                            image.onload = function(){
                                if( (image.fileSize/1024) > opts.maxSize) {
                                	alert('图片大小不能超过'+opts.maxSize+'K');
                                	return false;
                                }
                            }
                            image.src = 'file:///' + this.value;

                            createImg();
                            imgDiv.attr('src', image.src);
                            autoScaling();
                        }  else {
                        	
                        	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;
                                }
                            }
                            image.src = img;                        	
                            
                        	imgDiv.html('');                        	
                            imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });
                            imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";                           
                            
                            try {
                                imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img;
                            } catch (e) {
                                alert("无效的图片文件！");
                                return;
                            }                            
                            
                            setTimeout("autoScaling()", 100);                            
                        }
                    }
                    else {
                    	try{   
                    		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;
                			}
                			
                			createImg();
                    		
                    		//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
                    		try{
                    			//Firefox7.0 以下                    			
                    			imgDiv.attr('src', file.getAsDataURL());
                    		}catch(e){
                    			//Firefox8.0以上                    			
                    			imgDiv.attr('src', window.URL.createObjectURL(file));
                    		}
                    		
	                        imgDiv.css({ "vertical-align": "middle" });
	                        setTimeout("autoScaling()", 100);
                    	}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]); 
                    	        setTimeout("autoScaling()", 100);
                    	    }  
                    	};
                    }
                }
            });
        }
    });
})(jQuery);

插件使用:

<div style="width:90px; height:110px; overflow:hidden; border:1px solid red;">
<div id="imgDiv"> </div>
</div>
<br>
<input type="file" value="上传文件">

<script>
$(document).ready(function() {	
     $("input").uploadPreview({ width: 90, height: 110, imgDiv: "#imgDiv"});
});
</script>

评论

3 楼 u012920018 2015-12-31  

 

2 楼 icolorfulday 2013-12-15  

IE10不兼容

1 楼 rj0721clp 2013-10-09  

按照你的方法,我的IE9怎么就显示不了图片呢