五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置: 365建站網(wǎng) > 365文章 > [原創(chuàng)]jQuery PreviewImg 上傳預(yù)覽插件

[原創(chuàng)]jQuery PreviewImg 上傳預(yù)覽插件

文章來(lái)源:365jz.com     點(diǎn)擊數(shù):1138    更新時(shí)間:2009-09-15 09:48   參與評(píng)論

最新版本請(qǐng)查看 http://www.9icool.net/

jQuery PreviewImg上傳圖預(yù)覽插件,可自動(dòng)縮略圖,它是基于jQuery類庫(kù),可以預(yù)覽上傳控件需上傳的圖, 或html 元素中background-image 屬性u(píng)rl

//====================================================================================================
// [插件名稱] jQuery PreviewImg
//----------------------------------------------------------------------------------------------------
// [描    述] jQuery PreviewImg上傳圖預(yù)覽插件,可自動(dòng)縮略圖,它是基于jQuery類庫(kù),可以預(yù)覽上傳控件需上傳的圖,
//           或html 元素中background-image 屬性u(píng)rl
//----------------------------------------------------------------------------------------------------
// [作者網(wǎng)名] 孤葉 
// [郵    箱] solucky2008@gmail.com
// [作者博客] http://9icool.net/
// [更新日期] 2009-06-05
// [版 本 號(hào)] ver1.0
// [參數(shù)說(shuō)明] FitWidth 期望預(yù)覽圖的最大寬
//            FitHeight     期望預(yù)覽圖的最大高
//            showtype     0表示為 fileupload控件,1 表示顯示HTML元素 background-image
// [注意事項(xiàng)] 如果需要顯示title ,則對(duì)應(yīng)的html元素需要 title 屬性.
// [使用示例] $(document).ready(function() {
//        $(":file").previewimage();
//        $(".showimgspan").previewimage({ showtype: 1 })
//    });
//====================================================================================================
(function($) {
    // plugin definition
    $.fn.previewimage = function(options) {
        var setting = {
            FitWidth: 400,
            FitHeight: 200,
            showtype: 0
        }
        $.extend(true, setting, options);
        return this.each(function() {
            if (setting.showtype == 0) {
                $(this).change(function() {
                    var htmlfile = $(this)[0];
                    var title = $(this).attr("title");
                    var imgsrc = "";
                    try {//預(yù)覽代碼,支持 IE6、IE7。
                        if (document.all) //IE
                            imgsrc = htmlfile.value;
                        else
                            imgsrc = htmlfile.files[0].getAsDataURL(); //FF
                        if (imgsrc == "" || imgsrc == undefined)
                            return;
                    } catch (e) {
                        return;
                    }
                    ShowImgPreview(imgsrc, title, $(this), setting);
                }).mouseover(function() {
                    $(this).trigger("change");
                });

            }

            if (setting.showtype == "1") {
                $(this).mouseover(function() {
                    var src = $(this).css("background-image").replace("url(\"", "").replace("\")", "").replace("url(", "").replace(")", "");
                    if (src == "" || src == undefined || src == "none") {
                        return;
                    }
                    ShowImgPreview(src, $(this).attr("title"), $(this), setting);
                });
            }

        });
    };

    /*加載圖      
    總的原理就是new一個(gè)Image對(duì)象,設(shè)置了src屬性過(guò)后,不斷的檢查需要載入的圖片的寬和高,如果載入圖片成功的話,寬和高都是不為0的數(shù)值,這個(gè)時(shí)候停止Interval ,并且執(zhí)行onLoaded。
    */
    function EnhancedImage(src, onLoaded) {
        var self = this;
        this.src = src;
        this.width = 0;
        this.height = 0;
        this.onLoaded = onLoaded;
        this.loaded = false;
        this.image = null;

        this.load = function() {
            if (this.loaded)
                return;
            this.image = new Image();
            this.image.src = this.src;
            function loadImage() {
                if (self.width != 0 && self.height != 0) {
                    clearInterval(interval);
                    self.loaded = true;
                    self.onLoaded(self); //將實(shí)例傳入回調(diào)函數(shù)
                }
                self.width = self.image.width; //是number類型
                self.height = self.image.height;
            }
            var interval = setInterval(loadImage, 100);
        }
    }

    function ShowImgPreview(imgsrc, title, posobj, setting) {
        if (imgsrc == "" || imgsrc == undefined)
            return;
        /*動(dòng)態(tài)創(chuàng)建預(yù)覽圖層*/
        var newPreviewDiv = $("#picPreview");
        if (newPreviewDiv.length == 0) {
            var newPreviewDivHtml = "<div id=\"picPreview\" style=\"position:absolute; z-index:999;display:none;\">\
                    <span style=\"right:0; position:absolute; color:Red;\">xxx</span>\
                    <img id=\"picPreviewImg\">\
                </div>"
            newPreviewDiv = $(newPreviewDivHtml)
            $("body").append(newPreviewDiv);
        }
        var newPreview = document.getElementById("picPreviewImg");
        var _width = 0;
        var _height = 0;

        var image = new EnhancedImage(imgsrc, function() {
            if (image.width / image.height >= setting.FitWidth / setting.FitHeight) {
                if (image.width > setting.FitWidth) {
                    _width = setting.FitWidth;
                    _height = (image.height * setting.FitWidth) / image.width;
                } else {
                    _width = image.width;
                    _height = image.height;
                }
            } else {
                if (image.height > setting.FitHeight) {
                    _height = setting.FitHeight;
                    _width = (image.width * setting.FitHeight) / image.height;
                } else {
                    _width = image.width;
                    _height = image.height;
                }
            }
            newPreview.src = imgsrc;
            newPreview.style.height = _height + "px";
            newPreview.style.width = _width + "px";
            newPreviewDiv.show();
            newPreviewDiv.find("span:first").html(title);
            newPreviewDiv.css("top", posobj.offset().top - newPreviewDiv.height());
            newPreviewDiv.css("left", posobj.offset().left);
            posobj.mouseout(function() { $("#picPreview").hide(); });
            $(document).click(function() { $("#picPreview").hide(); });
        });
        image.load();
    }

})(jQuery);

更新日志:

2009-6-5 :v1.0發(fā)布

下載插件源碼及示例previewimgDemo.rar (2.67 kb)

Tag標(biāo)簽: jquery,插件

如對(duì)本文有疑問(wèn),請(qǐng)?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會(huì)為你解答??! 點(diǎn)擊進(jìn)入論壇

發(fā)表評(píng)論 (1138人查看0條評(píng)論)
請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī),嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
昵稱:
最新評(píng)論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時(shí)間:9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號(hào)