JavaScript 圖片上傳預覽效果

 隨着瀏覽器安全性的提升，要實現圖片預覽也愈來愈困難。

不過羣衆的智慧是無限的，網上也有不少變通或先進的方法來實現。
兼容：ie6/7/8, firefox 3.5.5
後臺支持下還兼容：opera 10.10, safari 4.0.4, chrome 3.0

【基本原理】

圖片預覽主要包括兩個部分：從file表單控件獲取圖像數據，根據數據顯示預覽圖像。
程序的file和img屬性就是用來保存file控件和顯示預覽圖像的容器的，而img還必須是img元素。

程序有如下幾種預覽方式：
simple模式：直接從file的value獲取圖片路徑來顯示預覽，適用於ie6；
filter模式：經過selection獲取file的圖片路徑，再用濾鏡來顯示預覽，適用於ie7/8；
domfile模式：調用file的getAsDataURL方法獲取Data URI數據來顯示預覽，適用於ff3；
remote模式：最後的辦法，把file提交後臺處理後返回圖片數據來顯示預覽，全適用。

程序定義時就自動根據瀏覽器設置MODE屬性：
 

ImagePreview.MODE  =  $$B.ie7  ||  $$B.ie8  ?   " filter "  :
    $$B.firefox  ?   " domfile "  :
    $$B.opera  ||  $$B.chrome  ||  $$B.safari  ?   " remote "  :  " simple " ;

若是用能力檢測會比較麻煩，因此只用了瀏覽器檢測。
因爲瀏覽器對應的默認模式是不會變的，這個值直接會保存到函數屬性中做爲公用屬性。
ps：ie6也能夠用filter模式，不過它有更好的simple模式。

使用說明

實例化時，有兩個必要參數，分別是file控件對象和img元素的預覽顯示對象：

new  ImagePreview( file, img );

可選參數用來設置系統的默認屬性，包括：
屬性:    默認值//說明
mode:  ImagePreview.MODE,//預覽模式
ratio:  0,//自定義比例
maxWidth: 0,//縮略圖寬度
maxHeight: 0,//縮略圖高度
onCheck: function(){},//預覽檢測時執行
onShow:  function(){},//預覽圖片時執行
onErr:  function(){},//預覽錯誤時執行
如下在remote模式時有效
action:  undefined,//設置action
timeout: 0//設置超時(0爲不設置)
若是要使用remote模式必須設置一個action。

還提供瞭如下方法：
preview：執行預覽操做；
dispose：銷燬程序。

查看演示

ASP版下載       .NET版下載