本地圖片預覽(支援IE6/IE7/IE8/Firefox3)經驗總結_javascript技巧

最近在Web專案開發過程中遇到的本地圖片預覽的需求，雖然最後因為其他原因沒能使用，但是也算有些了解，整理出來。

這裡我們按瀏覽器分，主要包括IE6，IE7/8 和Firefox3， 不包含Opera，Safari和Chrome，這三個基本上需求很小，沒有研究。

總結一下就是：
IE6下可以直接從file的value取得圖片路徑來顯示預覽。
IE7和IE8下方透過select取得file的圖片路徑，再用濾鏡來顯示預覽。
FireFox下呼叫file的getAsDataURL方法取得Data URI資料來顯示預覽。

下面是一個完整的Demo：

複製程式碼 程式碼如下:

程式碼如下:



程式碼如下:



程式碼如下:
>

alert("暫時不支援Opera瀏覽器"); } } if($.browser.safari){ alert("暫時不支援Safari瀏覽器"); } }