星期五, 1月 14, 2011

如何用 jQuery 去判斷檔案存不存在

最近好忙阿,趕羚羊的忙,Blog 草都有 180 了,心裡有個聲音,你再這樣墮落下去就去會被嫌棄的!! 所以新的年度,還是要重新開始,套一句常常聽到的話'"時間就像女人的乳溝,擠一擠還是有”,所以要寫文要寫文要寫文!!

喇賽的事情不多說了,今天要分享一下最近學到的東西,就是如何用 jQuery 去判斷檔案存不存在,這個問題對於網頁工作者非常有用,舉一個例子,例如一個購物網,一定會有產品列表頁,頁面上的產品圖片如果後台的維護人員還沒有上圖,這頁面上的產品我們會希望給它一個預設的圖,等候台上好圖後,圖片就恢復成該圖片自己的圖,像這種功能,用這方式做就很簡單輕鬆好自在!!我們直接看 code 吧!

function IsFileExist(filePath){
var bo = false;
$.ajax({
url:filePath,
type:'HEAD',
async:false,
success:function(){
bo = true;
},
error:function(){
bo = false;
}
});
return bo;
}

上面這個 filePath 是指檔案在 Server 端的路徑,還有注意我有加一個 async:false 的參數,這是說,不要執行非同步,簡單的來說就是會等結果出來才會傳回 true/false..

參考:
http://www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06


2011/01/12更新
好友demo有建議,如果是的話 onerror 這個 tag 來處理掉比較好,詳情可以看他的文章..

2 則留言:

demo 提到...

樣的寫法彷彿會造成很多次的 Request 而且因為使用了同步所以在頁面中有相當多圖片的時候可能會導致頁面出現的速度較緩慢,或許你可以嘗試使用 【利用onerror()處理圖片失連時替換顯示圖】
http://demo.tc/Post/285

Bibby 提到...

嗯,謝謝,收到又學到一招!!
不過當初用個個方式,是因為如果不是圖片的話,也想去使用,所以才想到這通用的方法!!