資訊專欄INFORMATION COLUMN
摘要：沒有瀏覽器測試，所以不知道是不是有效，其實里面看起來比我寫的那個復(fù)雜，實際上多了個檢驗格式上兼容寫法所以不要怕，如果我錯了記得提醒下我啊。目前為止其實已經(jīng)該說的都差不多覆蓋到了吧，動手能力強的話已經(jīng)可以根據(jù)教程寫一個實例出來的了。
系列文章
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(四) ----- FileReader
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(五) ----- H5拖拽事件
關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(六) ----- 圖片上傳,旋轉(zhuǎn),重繪,預(yù)覽等實戰(zhàn)(附DEMO)
摘自上面來源,分析的挺好,我又無恥得搬下來了：
使用FileReader對象,web應(yīng)用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容,可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據(jù).其中File對象可以是來自用戶在一個元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后的返回結(jié)果.
在這里作用就是當(dāng)你上傳圖片之后,可以直接從本地先讀取出原始數(shù)據(jù),然后在頁面上展示出來,就是傳說中的預(yù)覽圖片功能,在上傳到后臺前就已經(jīng)能先拿原始數(shù)據(jù)來使用了
看看兼容性如何(溫馨提示:下圖只代表支持程度,支持歸支持,不一定百分百支持,所以用到部分方法時不兼容時正常的)
創(chuàng)建一個FileReader對象:
var reader = new FileReader();事件處理程序:
| 事件 | 描述 |
|---|---|
| onabort | 當(dāng)讀取操作被中止時調(diào)用 |
| onerror | 當(dāng)讀取操作發(fā)生錯誤時調(diào)用 |
| onload | 當(dāng)讀取操作成功完成時調(diào)用 |
| onloadend | 當(dāng)讀取操作完成時調(diào)用,不管是成功還是失敗.該處理程序在onload或者onerror之后調(diào)用 |
| onloadstart | 當(dāng)讀取操作將要開始之前調(diào)用 |
| onprogress | 在讀取數(shù)據(jù)過程中周期性調(diào)用 |
| abort | 中止該讀取操作.在返回時,readyState屬性的值為DONE.當(dāng)該FileReader對象沒有在進行讀取操作時(也就是readyState屬性的值不為LOADING時),調(diào)用abort()方法會拋出異常DOM_FILE_ABORT_ERR |
下面方法會開始讀取指定的Blob對象或File對象中的內(nèi)容. 當(dāng)讀取操作完成時,readyState屬性的值會成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.區(qū)別在于:
| 屬性 | 描述 |
|---|---|
| readAsArrayBuffer | result屬性中將包含一個ArrayBuffer對象以表示所讀取文件的內(nèi)容 |
| readAsBinaryString | result屬性中將包含所讀取文件的原始二進制數(shù)據(jù) |
| readAsDataURL | result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內(nèi)容.(這個就是實現(xiàn)我們預(yù)覽的重要方法了!!!!!) |
| readAsText | result屬性中將包含一個字符串以表示所讀取的文件內(nèi)容 |
介紹到這里就差不多了,接下來看看怎么實現(xiàn)不提交后臺實現(xiàn)預(yù)覽圖片,這里只展示這部分功能先
示例
你看,其實很簡單,沒什么復(fù)雜代碼,只是需要的范圍比較廣,為了一個上傳圖片已經(jīng)折騰了多少知識點了,還沒完呢...o(一︿一+)o
回歸正題,說說幾個要點,首先看看代碼的
document.getElementById("uploadImage")出現(xiàn)了好幾次了,是不是好礙眼?是不是好想優(yōu)化?是不是想為什么不把他放到一個變量存起來算了?
不行的,因為當(dāng)你存一個變量之后再上傳文件,你就找不到FileReader對象了,詳情可以參考一下我之前寫的關(guān)於Javascript基本類型和引用類型小知識
然后oFReader.onload里面的oFREvent就是你能夠拿到的數(shù)據(jù)了,里面大概長這樣子的,看的眼花繚亂,你們可以慢慢挖掘
其中:
readyState: 0-還沒有加載任何數(shù)據(jù).1-數(shù)據(jù)正在被加載.2-已完成全部的讀取請求.
result: 返回文件的內(nèi)容。只有在讀取操作完成后，此屬性才有效，返回的數(shù)據(jù)的格式取決于是使用哪種讀取方法來執(zhí)行讀取操作的。
中間插播一則消息吧,圖中可看到一個result屬性的地址,那是一個base64 編碼.就是可以將一副圖片數(shù)據(jù)編碼成一串字符串，使用該字符串代替圖像地址。
我們所看到的網(wǎng)頁上的每一個圖片，都是需要消耗一個 http 請求下載而來的,后面因此誕生的精靈圖就是基于這個問題才出來,不過局限性比較大,很難適用到所有項目
詳情可以參考一下【前端攻略】：玩轉(zhuǎn)圖片Base64編碼
另外就是兼容問題,因為懶得一個個去驗證,就沒寫上去,不過查過資料放下來給你們,可能有用到,詳情可以參考一下
對于 Chrome、Firefox、IE10 使用 FileReader 來實現(xiàn)。
對于 IE6~9 使用濾鏡 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 來實現(xiàn)。
沒有IE瀏覽器測試，所以不知道是不是有效，其實里面看起來比我寫的那個復(fù)雜，實際上多了個檢驗格式：
rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
IE上兼容寫法：
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
所以不要怕，如果我錯了記得提醒下我啊。
目前為止其實已經(jīng)該說的都差不多覆蓋到了吧，動手能力強的話已經(jīng)可以根據(jù)教程寫一個實例出來的了。我看情況要不要加一個實戰(zhàn)代碼做系列結(jié)尾。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/106309.html
摘要：二編輯合成照片使用編輯壓縮重設(shè)尺寸比例轉(zhuǎn)成輸出預(yù)覽。三保存并上傳照片提交數(shù)據(jù)到服務(wù)器需要服務(wù)器支持我跳過了。數(shù)據(jù)主要來自拍攝的照片，多用于移動端開發(fā)，端也會用到，此插件兼容主流瀏覽器，以下不支持。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端...
摘要：在中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。如果需要設(shè)置允許放置，我們必須阻止對元素的默認(rèn)處理方式方法。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- FormData關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(...
摘要：為了解救上面說到的問題是向提交的一個草案，旨在推出一套標(biāo)準(zhǔn)的，其基本功能是實現(xiàn)用對本地文件進行操作。出于安全性的考慮，該只對本地文件提供有限的訪問。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) ----- File關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(三) ----- For...
摘要：表單用于向服務(wù)器傳輸數(shù)據(jù)。屬性對象的屬性指定了一個事件句柄函數(shù)。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。詳情查閱請狠狠地點擊關(guān)于對象代表表單中的一個提交按鈕在表單提交之前，觸發(fā)事件句柄，并且一個句柄可以通過返回來取消表單提交。 系列文章 關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(零)關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(一) ----- XMLHttpRequest關(guān)于前端上傳文件全面基礎(chǔ)掃盲貼(二) -...
閱讀 3125·2021-11-18 10:02
閱讀 3413·2021-11-02 14:48
閱讀 3456·2019-08-30 13:52
閱讀 621·2019-08-29 17:10
閱讀 2150·2019-08-29 12:53
閱讀 1475·2019-08-29 12:53
閱讀 1090·2019-08-29 12:25
閱讀 2227·2019-08-29 12:17
