兼容浏览器图片上传本地预览功能js脚本

最新推荐文章于 2022-01-20 20:51:57 发布

Z-oneLy

最新推荐文章于 2022-01-20 20:51:57 发布

阅读量784

点赞数

分类专栏： jquery 文章标签： jquery 图片预览本地上传图片预览图片插件

本文链接：https://blog.csdn.net/mehear/article/details/12710599

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、图片上传实现本地预览

由于上传图片功能，现在大多数都需要在本地实现预览，为了能够更好的让用户体验到效果，实现成品的证明，需要兼容好几种浏览器，所有通过各个例子整合了这个例子插件，兼容火狐、谷歌、ie8，其他的没有进行测试过

(function($){
    jQuery.fn.extend({
        uploadPreview: function(opts){
            opts = jQuery.extend({
                width: 0,
                height: 0,
                imgPreview: null,
                imgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                callback: function(){ return false; }
            	}, opts || {});
				
            var _self = this;
            var _this = $(this);
            var imgPreview = $(opts.imgPreview);
            //设置样式
            autoScaling = function(){
                    imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height});
                    imgPreview.show();
            }
			//file按钮出发事件
            _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) {//判断ie
						var path = $(this).val();
			            if (/"\w\W"/.test(path)) {
			                path = path.slice(1,-1);
			            }
			            imgPreview.attr("src",path);
						imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height});
						setTimeout("autoScaling()", 100);
                    }
                    else {
                        if ($.browser.version < 7) {
                            imgPreview.attr('src', this.files.item(0).getAsDataURL());
                        }
                        else {
                            oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
                            oFReader.onload = function(oFREvent){
                                imgPreview.attr('src', oFREvent.target.result);
                            };
                            var oFile = this.files[0];
                            oFReader.readAsDataURL(oFile);
                        }
						imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height});
                        setTimeout("autoScaling()", 100);
                    }
                }
                opts.callback();
            });
        }
    });
})(jQuery);

二、调用方法

 jQuery(function(){
        jQuery("#idFile1").uploadPreview({ 
			width: 100, 
			height: 100, 
			imgPreview: "#idImg1", 
			imgType: ["bmp", "gif", "png", "jpg"],
            callback: function() {
				ip1();
				return false; 
				}
			}); 
});