html5從一開始就給開發(fā)者很多的期待，提供眾多新的API，不用再想以前一樣，為了實(shí)現(xiàn)某個(gè)功能寫很多的代碼。在以前，如果要實(shí)現(xiàn)圖片預(yù)覽會(huì)怎么做呢，因?yàn)闉榱税踩脑?#xff0c;web端的js是不能讀取文件的本地真實(shí)路徑的，那么只能將圖片上傳到服務(wù)器上，然后再拿到圖片的鏈接，這樣才能實(shí)現(xiàn)圖片預(yù)覽。而服務(wù)器呢，比如有兩個(gè)文件夾，一個(gè)是臨時(shí)文件夾，一個(gè)是正式文件夾，臨時(shí)文件夾會(huì)定時(shí)進(jìn)行清理，正式文件夾是用戶確認(rèn)使用的圖片存儲(chǔ)的位置。

1. fileReader

現(xiàn)在HTML5提供的API不再讓圖片預(yù)覽那么麻煩，FileReader提供了很多的方法來(lái)進(jìn)行圖片預(yù)覽和文本讀取，同時(shí)也提供了一整套完整的事件來(lái)捕獲文件的狀態(tài)，如下：

FileReader接口的方法 FileReader接口有4個(gè)方法，其中3個(gè)用來(lái)讀取文件，另一個(gè)用來(lái)中斷讀取。無(wú)論讀取成功或失敗，方法并不會(huì)返回讀取結(jié)果，這一結(jié)果存儲(chǔ)在result屬性中。

方法名	參數(shù)	描述
readAsBinaryString	file	將文件讀取為二進(jìn)制編碼
readAsText	file[, encoding]	按照格式將文件讀取為文本，encode默認(rèn)為UTF-8
readAsDataURL	file	將文件讀取為DataUrl
abort	(none)	終端讀取操作

FileReader接口事件 FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時(shí)的狀態(tài)。

事件	描述
onabort	中斷
onerror	出錯(cuò)
onloadstart	開始
onprogress	正在讀取
onload	成功讀取
onloadend	讀取完成，無(wú)論成功失敗

2. 使用 fileReader 讀取圖片

從上面的表格中，我們可以大致了解fileReader提供哪些方法和事件，不過(guò)本文主要是講解圖片的讀取，那么我們就是用readAsDataURL()就可以了。不過(guò)，在進(jìn)行這一切之前，我們必須檢測(cè)當(dāng)前的瀏覽器是否支持HTML5的fileReader，別進(jìn)行了一系列的處理和操作，結(jié)果js報(bào)錯(cuò)，說(shuō)fileReader沒有定義。就好像對(duì)一個(gè)女孩兒又親又啃，馬上要提槍上馬了，結(jié)果發(fā)現(xiàn)這是個(gè)純爺們。

if(!(window.FileReader && window.File && window.FileList && window.Blob)){show.innerHTML = '您的瀏覽器不支持fileReader';upimg.setAttribute('disabled', 'disabled');return false; }

好的，讓我們先看下demo演示：【狠狠點(diǎn)擊這里】

2.1 讀取單張圖片

使用input[type=file]控件讀取文件，然后監(jiān)聽這個(gè)控件的change事件，若讀取的文件個(gè)數(shù)大于零，那么就進(jìn)行下一步的操作：

<input type="file" id='upimg' /> var upimg = document.querySelector('#upimg'); upimg.addEventListener('change', function(e){var files = this.files;if(files.length){// 對(duì)文件進(jìn)行處理，下面會(huì)講解checkFile()會(huì)做什么checkFile(this.files);} });

現(xiàn)在我們只能選取一張圖片，針對(duì)選取的這張圖片，我們使用fileReader進(jìn)行圖片的處理

// 圖片處理 function checkFile(files){var file = files[0];var reader = new FileReader();// show表示<div id='show'></div>，用來(lái)展示圖片預(yù)覽的if(!/image\/\w+/.test(file.type)){show.innerHTML = "請(qǐng)確保文件為圖像類型";return false;}// onload是異步操作reader.onload = function(e){show.innerHTML = '<img src="'+e.target.result+'" alt="img">';}reader.readAsDataURL(file); }

現(xiàn)在，就可以在頁(yè)面上看到圖片了。審查元素后我們能夠看到，圖片地址是個(gè)base64的字符串，如：'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sA......'

2.2 讀取多張圖片

多張圖片和單張圖片的處理過(guò)程很相似，但是也還是有區(qū)別的，因?yàn)閞eader.onload()是一個(gè)異步的操作，進(jìn)行下一步的操作時(shí)必須在這個(gè)方法里

<input type="file" id='upimg' multiple /> // change事件沒有改動(dòng) // 圖片處理 function checkFile(files){var html='', i=0;var func = function(){if(i>=files.length){// 若已經(jīng)讀取完畢，則把html添加頁(yè)面中show.innerHTML = html;}var file = files[i];var reader = new FileReader();// show表示<div id='show'></div>，用來(lái)展示圖片預(yù)覽的if(!/image\/\w+/.test(file.type)){show.innerHTML = "請(qǐng)確保文件為圖像類型";return false;}reader.onload = function(e){html += '<img src="'+e.target.result+'" alt="img">';i++;func(); //選取下一張圖片}reader.readAsDataURL(file);}func(); }

2.3 拖拽拉去圖片

拖拽事件，采用的是HTML5中的drag和drop，本文不著重介紹這兩個(gè)方法，僅僅是講解如何使用。

首先，我們?cè)O(shè)置一塊拖拽區(qū)域，告訴用戶應(yīng)該把圖片拖拽到什么位置：

<style>.drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}.drag_hover{background: #FAD6F9;} </style> <span class='drag' id="drag">拖拽區(qū)域</span>

然后，我們給drag區(qū)域綁定上拖拽事件

var drag = document.getElementById('drag'); drag.addEventListener('dragenter', function(e){// 拖拽鼠標(biāo)進(jìn)入?yún)^(qū)域時(shí)this.className = 'drag_hover'; }, false); drag.addEventListener('dragleave', function(e){// 拖拽鼠標(biāo)離開區(qū)域時(shí)this.className = ''; }, false); drag.addEventListener('drop', function(e){// 當(dāng)鼠標(biāo)執(zhí)行‘放’的動(dòng)作時(shí)，執(zhí)行讀取文件操作var files = e.dataTransfer.files;this.className = '';if (files.length != 0) {checkFile(files);};e.preventDefault(); }, false) drag.addEventListener('dragover', function(e){// 當(dāng)對(duì)象拖動(dòng)到目標(biāo)對(duì)象時(shí)觸發(fā)e.dataTransfer.dragEffect = 'copy';e.preventDefault(); }, false);

這里有個(gè)需要注意的地方：需要給dragover和drop添加阻止默認(rèn)事件，否則瀏覽器會(huì)采用file:///的方式打開文件。drop事件執(zhí)行后就是進(jìn)行checkFile()，后續(xù)的操作與使用input[type=file]的操作一樣。

3. 點(diǎn)擊查看原圖

當(dāng)我們點(diǎn)擊圖片查看原圖時(shí)，需要知道圖片的原始尺寸。可能你會(huì)想到使用img.width和img.height，對(duì)，這個(gè)確實(shí)能獲取到圖片的長(zhǎng)和寬，但是，這個(gè)長(zhǎng)和寬是經(jīng)過(guò)css修飾后的，不是圖片原始的尺寸。如果要獲取圖片的原始尺寸，我們可以在js中創(chuàng)建一個(gè)imgs對(duì)象，然后把那張圖片的地址給了這個(gè)imgs對(duì)象，然后獲取imgs對(duì)象的尺寸，這樣就能獲取到圖片的原始尺寸了。

var imgs = new Image(); imgs.src = img.src; // 給新的img對(duì)象鏈接 console.log(imgs.width, imgs.height);

而在HTML5中，我們不用再那么麻煩的創(chuàng)建一個(gè)無(wú)用的img對(duì)象了，直接使用給出的屬性即可。

console.log(img.naturalWidth); // 獲取圖片的原始的寬度 console.log(img.naturalHeight); // 獲取圖片的原始的高度

獲取到圖片的原始尺寸后，就能做出‘查看原圖’的效果了。

4. 總結(jié)

HTML5 真是個(gè)好東西，還有著很多的東西等著我們?nèi)ネ诰颉！败f騰吧，程序員”！

總結(jié)

以上是生活随笔為你收集整理的HTML5 实现图片预览和查看原图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。