JQuery外掛：圖片上傳本地預覽外掛，改進案例一則。

rgqancy發表於2016-05-25
jQuery
/*
*名稱:圖片上傳本地預覽外掛 v1.1
*作者:周祥
*時間:2013年11月26日
*介紹:基於JQUERY擴充套件,圖片上傳預覽外掛 目前相容瀏覽器(IE 谷歌 火狐) 不支援safari
*外掛網站:http://keleyi.com/keleyi/phtml/image/16.htm
*引數說明: Img:圖片ID;Width:預覽寬度;Height:預覽高度;ImgType:支援檔案型別;Callback:選擇檔案顯示圖片後回撥方法;
*使用方法: 
<div>
<img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
把需要進行預覽的IMG標籤外 套一個DIV 然後給上傳控制元件ID給予uploadPreview事件
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
*/
jQuery.fn.extend({
    uploadPreview: function (opts) {
        var _self = this,
            _this = $(this);
        opts = jQuery.extend({
            Img: "ImgPr",
            Width: 100,
            Height: 100,
            ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
            Callback: function () {}
        }, opts || {});
        _self.getObjectURL = function (file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        };
        _this.change(function () {
            if (this.value) {
                if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                    alert("選擇檔案錯誤,圖片型別必須是" + opts.ImgType.join("，") + "中的一種");
                    this.value = "";
                    if('headIconImgShow' != opts.Img) {//wuwei新增2016-03-30
                        $("#" + opts.Img).attr('src', "");//liuhu新增20160120
                    }
                    return false;
                }
               
                //Jquery 1.3 : 1.3以後就不建議使用了:$.browser.msie && $.browser.version，你目前使用的元件裡可能還有應用。
                //JQuery 1.7 : 1.7
                //JQuery 1.9 : 1.9之後，支援$.support.msie
                //具體瀏覽器版本判斷方案：
                //http://zhidao.baidu.com/link?url=LftOa4QYHnDBuOj1HHEnUbmuIgbvd9Ka_yCKWbofx-wDw12l90lIZWn4zyQniwNOE_5vqPj-q9cqRZRFoQnL8q
                //http://www.jb51.net/article/50463.htm
                //http://my.oschina.net/ffwcn/blog/213708
                
                //上邊說了一大堆，瀏覽器版本判斷來判斷去，這裡的程式碼，無非是想確定files是否被瀏覽器支援，就不如快刀斬亂麻，不拋異常就是支援，否則就是不支援。
                try {
                    $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]));
                } catch (e) {
                    var src = "";
                    var obj = $("#" + opts.Img);
                    var div = obj.parent("div")[0];
                    _self.select();
                    if (top != self) {
                        window.parent.document.body.focus();
                    } else {
                        _self.blur();
                    }
                    src = document.selection.createRange().text;
                    document.selection.empty();
                    obj.hide();
                    obj.parent("div").css({
                        'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
                        'width': opts.Width + 'px',
                        'height': opts.Height + 'px'
                    });
                    div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
                }
                opts.Callback();
            }
        })
    }
});

 

原作者寫這個外掛時，可能隨手，就用了JQuery1.9的新方法$.support.msie，而我的現實情況是，專案已經用了JQuery1.7，我可不敢貿然升級到1.9（搞不好，吃不了兜著走）。

我個人推斷作者的思路是，是想通過判斷瀏覽器的型別和版本來確定是否支援input的files特性（作者說了不支援safari，當然連蘋果都不釋出window版的safari，還支援個毛線）。

如果是IE，是IE10及其以上版本，也支援files；是IE9及以下版本，則不支援files，呼叫files自然會丟擲異常，通過捕獲異常，採用workaroud方案繞過去。非IE，認為都是webkit，都理所當然是標準的支援files。

作者要求JQuery1.9,我們只用JQuery1.7，那就只好改寫$.support.msie，網上判斷IE版本的最佳方案，就是正規表示式。可問題是現在IE11之後的Edge，沒準agent裡已經不包含msie這個字元了，至少我用正則沒進去。

乾脆思路跳出來，快刀斬亂麻，參照原作者那部分的思路，管你啥版本，無非要判斷瀏覽器是否支援files，試一下不就知道了，不拋異常就支援，否則捕獲異常就按IE9下的workaround方案執行。

這樣以後，管你微軟出個狗屁（呵呵，我們家小點點【2歲】最近學會很愛用的罵人詞）瀏覽器，這程式碼依然健壯如泰山。

 

相關文章