国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS魔法堂之實戰:純前端的圖片預覽

岳光 / 3353人閱讀

摘要:一前言圖片上傳是一個普通不過的功能,而圖片預覽就是就是上傳功能中必不可少的子功能了。偶然從上找到純前端圖片預覽的相關資料,經過整理后記錄下來以便日后查閱。類型為,表示在讀取文件時發生的錯誤,只讀。

一、前言  

圖片上傳是一個普通不過的功能,而圖片預覽就是就是上傳功能中必不可少的子功能了。在這之前,我曾經通過訂閱input[type=file]元素的onchange事件,一旦更改路徑則將圖片上傳至服務器,接著就獲取圖片路徑并賦值到img元素上。先不管文件異步提交的解決方案,就是服務端清理那些臨時的預覽圖片已經增加不少工作量了。

偶然從MDN上找到純前端圖片預覽的相關資料,經過整理后記錄下來以便日后查閱。

二、準備功夫1──FileReader                  

FileReader是HTML5的新特性,用于讀取Blob和File類型的數據。具體的用法如下:

1. 構造方式
var fr = new FileReader();

2. 屬性

readyState:類型為unsigned short,FileReader實例的當前狀態,(EMPTY——0,還沒有加載任何數據;LOADING——1,數據正在加載;DONE——2,已完成全部的讀取請求),只讀。

result:讀取到的文件內容,只讀。

error:類型為DOMError,表示在讀取文件時發生的錯誤,只讀。

3. 方法

abort():中止讀取操作,并將readyState設置為DONE。當沒有執行讀取操作時,調用該方法會拋DOM_FILE_ABORT_ERR異常。

readAsArrayBuffer(Blob blob):讀取數據,result屬性被設置為ArrayBuffer類型

readAsText(Blob blob [, encoding="utf-8"]):讀取數據,result屬性被設置為String類型

readAsBinaryString(Blob blob):讀取數據,result屬性被設置為原始二進制數據

readAsDataURL(Blob blob):讀取數據,result屬性被設置為Data URI Scheme形式

4.事件

onload:讀取數據成功后觸發

onerror:讀取數據時拋異常時觸發

onloadstart:讀取數據前觸發

onloadend:讀取數據后觸發,在onload或onerror后觸發

onabort:中止讀取后觸發

onprogress:讀取過程中周期性觸發

5. 瀏覽器支持

FF3.6+,Chrome7+,IE10+

三、準備功夫2──DXImageTransform.Microsoft.AlphaImageLoader濾鏡

作用:主要作用是對圖片進行透明處理(IE5.5~6并不支持透明的png)

樣式中的使用方式

#preview{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png");
}

JS中的使用方式

var preview = document.getElementById("preview");
preview.style.filter = preview.currentStyle.filter + ";progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="dummy.png")";
preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src="dummy1.png";

屬性

enabled:可選項,設置濾鏡是否激活。值范圍true(默認),false

sizingMethod:可選項,設置濾鏡作用的圖片在容器邊界內的顯示方式,值范圍crop(剪切圖片以適應容器尺寸),image(默認值,增大或縮小容器尺寸以適應圖片的尺寸),scale(縮放圖片以適應容器尺寸)

src:必填項,使用絕對或相對URL指向背景圖片。當URL為用戶計算機本地地址時有效, 而img元素的src為用戶計算機本地地址時會拋不允許訪問本地文件系統的異常。

四、實現

接下來我們就利用FileReader的readAsDataURL來獲取Data URI Scheme來實現圖片預覽的功能,而IE5.5~9我們就使用濾鏡DXImageTransform.Microsoft.AlphaImageLoader來作降級處理。

html片斷:







js片斷:

var preview = function(el){
    var pv = document.getElementById("preview");
    // IE5.5~9使用濾鏡
    if (pv.filters && typeof(pv.filters.item) === "function"){
        pv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = el.value;
    }
    else{
        // 其他瀏覽器和IE10+(不支持濾鏡)則使用FileReader
        var fr = new FileReader();
        fr.onload = function(evt){
            var pvImg = new Image();
            pvImg.style.width = pv.offsetWidth + "px";
            pvImg.style.height = pv.offsetHeight + "px";
            pvImg.src = evt.target.result;
            pv.removeChild(0);
            pv.appendChild(pvImg);
        };
        fr.readAsDataURL(el.files[0]);
    }
};
五、坑

由于IE11作了安全方面的考慮,使得在input[type=file]元素上通過value、outerHTML和getAttribute的方式都無法獲取用戶所選文件的真實地址,只能獲取到 C:fakepath文件名稱 。因此假如使用IE11,但文本模式卻設置為10以下,那就沒木有辦法實現圖片預覽了。

解決辦法1──在head標簽下加入這句: 。這樣就可以告訴IE,默認使用當前IE的最高版本解析、渲染網頁了。

解決辦法2──采用 document.selection.createRangeColleciton() 獲取真實地址,具體操作如下:

// 假設fileEl就是[type=file]元素
fileEl.select();
var filePath = document.selection.createRangeCollection()[0].htmlText;
六、使用window.URL.createObjectURL代替FileReader      

通過FileReader的readAsDataURL方法獲取的Data URI Scheme會生成一串很長的base64字符串,若圖片較大那么字符串則更長,若頁面出現reflow時則會導致性能下降。解決方案如下:

1. 預覽的img標簽使用絕對定位,從而脫離正常文檔流,那么就與文檔的其他元素無關了,而reflow時則不會影響性能。

2. 采用 window.URL.createObjectURL(Blob blob) 生成數據鏈接。

var createObjectURL = function(blob){
  return window[window.webkitURL ? "webkitURL" : "URL"]["createObjectURL"](blob);
};

注意: window.URL.createObjectURL 生成的數據鏈接是獨占內存的,因此若不時用時需要調用 window.URL.revokeObjectURL(DOMString objUrl) 來釋放內存。在刷新頁面時,也會自動釋放內容。

var resolveObjectURL = function(blob){
  window[window.webkitURL ? "webkitURL" : "URL"]["revokeObjectURL"](blob);
};
七、總結

好吧,現在媽媽再也不擔心我的圖片預覽實現得太麻煩了!
如果覺得上面的使用方式不方便,可以訪問https://github.com/fsjohnhuang/preview/blob/master/preview.js,我已經將其封裝成工具函數了。

如果您覺得本文的內容有趣就掃一下吧!捐贈互勉!

??

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85861.html

相關文章

  • 前端每日實戰:129# 視頻演示如何用 CSS 和原生 JS 創作一個條紋錯覺動畫

    摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。接下來我們來揭秘真相。 showImg(https://segmentfault.com/img/bVbgztX?w=400&h=293); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen...

    alexnevsky 評論0 收藏0
  • 前端每日實戰:129# 視頻演示如何用 CSS 和原生 JS 創作一個條紋錯覺動畫

    摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。接下來我們來揭秘真相。 showImg(https://segmentfault.com/img/bVbgztX?w=400&h=293); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen...

    flybywind 評論0 收藏0
  • 前端每日實戰:14# 視頻演示如何用 CSS 創作一種側立圖書特效

    摘要:效果預覽按下右側的點擊預覽按鈕在當前頁面預覽,點擊鏈接全屏預覽。可交互視頻教程此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbbyuY?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕在當前頁面預覽,點擊鏈接全屏預覽。 https://codepen.io/zhang-ou/pen/...

    XboxYan 評論0 收藏0

發表評論

0條評論

岳光

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<