web 圖片上傳實現本地預覽

標籤：添加   ade   create   代碼   支援   bsp   頁面   btn   路徑   

前言： 

     剛成為碼農不久，第一次工作中接觸圖片上傳功能，說到圖片上傳，大多數程式員可能都是先上傳伺服器，再擷取路徑。如果使用者多長更改圖片，伺服器會產生許多垃圾檔案。怎樣用js實現本地預覽。今天特意抽空百度研究了一下。

   在說上傳之前先說說如何替換or美化瀏覽器內建的簡陋上傳按鈕（自訂自己的上傳按鈕 如:img）:

  1.將自訂上傳按鈕上方添加 input file 框，實現input實現透明處理。

  2.對自訂上傳按鈕添加事件。隱藏真正input框。用事件來觸發：

     function imgBtn(){

      return document.getElementById("inputid").click();   

    }

  

   現在瀏覽器基本都支援H5 。針對H5的代碼：

 var docObj=document.getElementById("inputid"); var imgObjPreview=document.getElementById("imgId"); imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

 針對ie的代碼：

docObj.select();docObj.blur();var localImagId = document.getElementById("divid or imgid");var imgSrc = docObj.createTextRange().text;try{     localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";   localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;}catch(e){   console.log(e);   alert("您上傳的圖片格式不正確，請重新選擇!");   return false;}

 

很多大型網站上都使用到了這個濾鏡，它是IE濾鏡的一種，其主要作用就是對圖片進行透明處理。雖然FireFox和IE7以上的IE瀏覽器已經支援透明的PNG圖片，但是就IE5-IE6而言還是有一定的意義。
文法：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

屬性：
　　enabled :　可選項。布爾值(Boolean)。設定或檢索濾鏡是否啟用。true | false （這個基本可以忽略，被禁止了那還搞什麼……）

　　　　　true :　 預設值。濾鏡啟用。

　　　　　false :　 濾鏡被禁止。

   sizingMethod : 可選項。字串(String)。設定或檢索濾鏡作用的對象的圖片在對象容器邊界內的顯示方式。（可以無視這行說明，關鍵是下面的參數。一般來說單獨圖片且精度比較高的使用scale比較合適，除非您把所有的要用到的圖片都放到一張圖那就當我沒說過。但是那樣做的話這張png圖片的體積估計不會很小。另，這個濾鏡只是載入，其填充方式還是可以受CSS控制的。）

　　　　　crop :　剪下圖片以適應對象尺寸。

　　　　　image :　預設值。增大或減小對象的尺寸邊界以適應圖片的尺寸。

　　　　　scale :　縮放圖片以適應對象的尺寸邊界。

　　src :　必選項。字串(String)。（指定圖片的路徑。要注意的是這個路徑是指載入濾鏡的頁面相對於圖片的路徑而不是css檔案相對於圖片的路徑。這跟一般的圖片載入有區別。）

使用執行個體：

.login_logo { 　　background-image: url(../Image/login_logo.png);　　_background-image: none;　　_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=‘/Public/Image/login_logo.png‘);　　}

  

web 圖片上傳實現本地預覽