使用jQuery來檢測遠程圖片文件是否存在

 

最近為我的憨豆人笑園添加圖片功能時，遇到了這個問題，用戶可以填寫一個遠程的圖片地址，也可以上傳一個本地圖片。為了不浪費服務器的資源，我們需要在客戶端先對用戶填寫的遠程圖片地址進行判斷，看是否可以訪問。可以訪問在服務器端就進行處理添加到數據庫中。

具體實施方法是這樣的：

1、用戶添加遠程圖片到input控件中，並為input控件添加焦點丟失處理方法；

2、當input控件的value值不為空時，使用ajax訪問這個遠程地址，當能夠訪問時，返回的狀態碼為success。

這里主要說說jQuery來完成這樣一次ajax請求。

雖然jQuery提供了簡單的get方法來完成一次ajax請求，但是這個方法在這里無法完成使用。而是要使用jQuery提供的ajax基礎方法ajax方法。需要為這個ajax進行這樣幾個設置：

1、請求url，通過input控件獲取

2、設置ajax請求超時時間（timeout），因為如果這個遠程文件請求等待時間太長了本身也會影響用戶的訪問體驗，而默認的timeout為30秒，太長了。

3、設置請求成功的回調函數success

4、設置請求失敗的回調函數error

實現代碼如下：

$("input").blur(function() {

    var imgurl = $("input").val();

    if (imgurl !== '') {

        // 設置Ajax請求超時時間為1s鍾

        $.ajax(imgurl, {

            type: 'get',

            timeout: 1000,

            success: function() {

                alert("請求成功");

            },

            error: function() {

                alert("請求失敗");

            }

        });

    }

});

這里需要注意一點的就是這個ajax請求超時timeout的設置，這個設置的單位為毫秒，而且這個設置是全局的，所以，如果需要再次進行一次其他的ajax請求，需要重新設置timeout值。

這樣做有一個好處就是在提交表單前，我們就可以先模擬一次用戶訪問網站時對站外圖片的請求效果，對於遠程圖片服務器較差的影響訪問體驗的圖片可以提前給過濾掉！

/*  萬惡的分割線，我在這里要為大家道歉了，為了上面的錯誤代碼，上面通過jQuery的方法判斷遠程圖片文件是否存在的方法只在同域名下才可以用，要跨域名使用是不可能的，經過研究，總算找到了正確的方法，算是將功補過吧  */

這里就不需要用到jQuery了，就是普通的JavaScript代碼。

創建一個Image()對象后為這個對象添加一個onload事件的處理方法和一個onerror事件的處理方法，然后通過定義這個Image對象的src屬性來確定要加載的圖像。

當遠程圖片成功加載到本機內存中后，則觸發onload事件，如果找不到圖片，或者加載失敗，則觸發onerror事件，代碼如下：

// 定義一個Image對象

var img = new Image();

// 為Image對象添加圖片加載成功的處理方法

img.onload = function() {

    alert("圖像加載成功");

};

// 為Image對象添加圖片加載失敗的處理方法

img.onerror = function() {

    alert("圖像加載失敗");

}

// 開始加載圖片

img.src = imgurl;

這段代碼經過測試，正確！

 

http://www.xcoder.cn/index.php/archives/1019