上传图片预加载图片插件

如果我们在选择好上传的图片,我们就能够判断图片的size、宽度、高度以及上传图片的类型,这样我们就可以在前端做了判断,而不需要上传到后台页面才做出这些判断。这样可以提高用户的体验以及减少不必要的流量,于是上完查找资料,写出了如下jquery插件。

(function($){

    var defaults = {
        show:null,
        size:1000,
        extension:[]
    },
    browser = window.navigator.userAgent.toUpperCase();

    function checkExtension(file){
        var extensions = defaults.extension,
            len = extensions.length,
            name = file.name;
        if(len > 0){
            extension = name.substr(name.lastIndexOf(name)+1).toLowerCase();
            var i = 0;
            for(i;i < len;i++){
                if (defaults.extension[i] === extension) break;
            }
            if (i == len) return false;
        }
        return true;
    }

    function checkSize(file){
        if(defaults.size) {
            var size = file.size;
            if(size > defaults.size) return false;
        }
        return true;
    }

    function show(src){
        if(defaults.show){
            if(!checkExtension(src))
                throw new Error("上传文件不符合指定格式要求");
            var show = $(defaults.show);
            show.empty();
            show.append($('<img src="'+src+'">'));
        }
    }

    function preview(elem){
        if(elem.files){
            var file = elem.files[0];
            if(!checkSize(file.size))
                throw new Error("文件超出了指定大小");
            if(window.FileReader){
                var reader = new FileReader();
                reader.onload = function(e){
                    show(e.target.result);
                };
                reader.readAsDataURL(file);
            }
        }else if (browser.indexOf("MSIE")>-1) { //ie、360低版本预览
            if(browser.indexOf("MSIE 6")>-1){ //ie 6
                show(elem.value);
            }else{
                elem.select();
                if(browser.indexOf("MSIE 9") > -1){ //ie 9
                    elem.blur();
                }
                var container = $(defaults.show)[0],
                    src = document.selection.createRange().text;
                container.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;                
            }
        }else if(browser.indexOf("FIREFOX") > -1){ //firefox
            var version = parseFloat(browser.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            version < 7 ? show(file.getAsDataURL) : show(window.URL.createObjectURL(file));
        }else show(elem.value);
    }

    $.fn.preview = function(options){
        var me = this;
        $.extend(defaults,options);
        $(me).on('change',function(e){
            preview(this);
        });
    };

})(jQuery);

$(function(){
    $('#fileUpload input[type=file]').preview({
        show:$('#preview')
    });
});

  美中不足的地方是,在ie中使用滤镜显示图片,出现异常。大家如果解决了或有什么好的建议,可以请贴上,大家一起探讨分享。

posted on 2014-10-13 17:47  sqljiang  阅读(182)  评论(0)    收藏  举报