當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5 实现图片预览和查看原图

發布時間：2025/3/15 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5 实现图片预览和查看原图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

html5從一開始就給開發者很多的期待，提供眾多新的API，不用再想以前一樣，為了實現某個功能寫很多的代碼。在以前，如果要實現圖片預覽會怎么做呢，因為為了安全的原因，web端的js是不能讀取文件的本地真實路徑的，那么只能將圖片上傳到服務器上，然后再拿到圖片的鏈接，這樣才能實現圖片預覽。而服務器呢，比如有兩個文件夾，一個是臨時文件夾，一個是正式文件夾，臨時文件夾會定時進行清理，正式文件夾是用戶確認使用的圖片存儲的位置。

1. fileReader

現在HTML5提供的API不再讓圖片預覽那么麻煩，FileReader提供了很多的方法來進行圖片預覽和文本讀取，同時也提供了一整套完整的事件來捕獲文件的狀態，如下：

FileReader接口的方法 FileReader接口有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法并不會返回讀取結果，這一結果存儲在result屬性中。

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

FileReader接口事件 FileReader接口包含了一套完整的事件模型，用于捕獲讀取文件時的狀態。

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

2. 使用 fileReader 讀取圖片

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

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

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

2.1 讀取單張圖片

使用input[type=file]控件讀取文件，然后監聽這個控件的change事件，若讀取的文件個數大于零，那么就進行下一步的操作：

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

現在我們只能選取一張圖片，針對選取的這張圖片，我們使用fileReader進行圖片的處理

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

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

2.2 讀取多張圖片

多張圖片和單張圖片的處理過程很相似，但是也還是有區別的，因為reader.onload()是一個異步的操作，進行下一步的操作時必須在這個方法里

<input type="file" id='upimg' multiple /> // change事件沒有改動 // 圖片處理 function checkFile(files){var html='', i=0;var func = function(){if(i>=files.length){// 若已經讀取完畢，則把html添加頁面中show.innerHTML = html;}var file = files[i];var reader = new FileReader();// show表示<div id='show'></div>，用來展示圖片預覽的if(!/image\/\w+/.test(file.type)){show.innerHTML = "請確保文件為圖像類型";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，本文不著重介紹這兩個方法，僅僅是講解如何使用。

首先，我們設置一塊拖拽區域，告訴用戶應該把圖片拖拽到什么位置：

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

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

3. 點擊查看原圖

當我們點擊圖片查看原圖時，需要知道圖片的原始尺寸。可能你會想到使用img.width和img.height，對，這個確實能獲取到圖片的長和寬，但是，這個長和寬是經過css修飾后的，不是圖片原始的尺寸。如果要獲取圖片的原始尺寸，我們可以在js中創建一個imgs對象，然后把那張圖片的地址給了這個imgs對象，然后獲取imgs對象的尺寸，這樣就能獲取到圖片的原始尺寸了。

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

而在HTML5中，我們不用再那么麻煩的創建一個無用的img對象了，直接使用給出的屬性即可。

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

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

4. 總結

HTML5 真是個好東西，還有著很多的東西等著我們去挖掘。“躥騰吧，程序員”！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。