兼容到IE6 JS上傳圖片預(yù)覽插件制作

一、實(shí)現(xiàn)圖片預(yù)覽的一些方法。
了解了一下，其實(shí)方法都是大同小異的。大概有以下幾種方式：
①訂閱input[type=file]元素的onchange事件.
一旦選擇的路徑被改變就把圖片上傳至服務(wù)器，然后就返回圖片在服務(wù)器端的地址，并且賦值到img元素上。
缺點(diǎn)：工作量大，有些上傳并不是用戶最終需要上傳的圖片，但是這種方式會把上傳過程中選擇過的圖片都保存至服務(wù)器端，會造成資源浪費(fèi)，而且服務(wù)器端清理臨時(shí)的那些預(yù)覽圖片也需要一定的工作量。
②利用HTML5的新特性FileReader 。
這個(gè)對象提供了很多相關(guān)的方法，其中最主要用到readAsDataURL這個(gè)方法。點(diǎn)我了解更多。
缺點(diǎn)：通過FileReader的readAsDataURL方法獲取的Data URI Scheme會生成一串很長的base64字符串，若圖片較大那么字符串則更長，若頁面出現(xiàn)reflow時(shí)則會導(dǎo)致性能下降。且瀏覽器支持情況不一致，支持的瀏覽器：FF3.6，Chrome7 ， IE10。
③使用window.URL.createObjectURL代替FileReader，再用DXImageTransform.Microsoft.AlphaImageLoader濾鏡兼容IE 。
缺點(diǎn)：由于IE11作了安全方面的考慮，使得在input[type=file]元素上通過value、outerHTML和getAttribute的方式都無法獲取用戶所選文件的真實(shí)地址，只能獲取到
D:rontEnd文件名稱。因此需使用document.selection.createRangeCollection方法來獲取真實(shí)地址。
二、我的插件制作
我選擇了比較保守的方法，就是第三種使用window.URL.createObjectURL代替FileReader，再用DXImageTransform.Microsoft.AlphaImageLoader濾鏡兼容IE的方法啦。
①第一步，HTML的布局

是不是想說so easy?
②第二步，插件js封裝。
【兼容到IE6 JS上傳圖片預(yù)覽插件制作】1、建立對象
我主要采用了組合繼承的方式，封裝了兩個(gè)方法，分別是單張圖片上傳和多張圖片上傳。因?yàn)闊o論是單張圖片上傳還是單張圖片上傳，都需要傳入、上傳圖片的input按鈕、img標(biāo)簽、包裹著img的div、最大的單張照片的值，單位為KB 。所以這四個(gè)參數(shù)在創(chuàng)建上傳圖片對象的時(shí)候就要傳入。創(chuàng)建該對象的方法如下：