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