霜天部落 | 专注PHP研发,研究LAMP高性能架构部署与优化

jQuery实现兼容浏览器的图片上传本地预览功能

图片上传本地预览功能代码在网上可以搜索很多,但同时可以兼容浏览器的话就多了,本文有个不错的示例,感兴趣的朋友可以参考下。

一、图片上传实现本地预览
由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐、谷歌、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;
        }
    });
);