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，本文不着重介紹這兩個方法，僅僅是講解如何使用。
首先，我們設置一塊拖拽區域，告訴用戶應該把圖片拖拽到什么位置：
<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">拖拽區域</span> 然后，我們給drag區域綁定上拖拽事件
var drag = document.getElementById(‘drag‘); drag.addEventListener(‘dragenter‘, function(e){ // 拖拽鼠標進入區域時 this.className = ‘drag_hover‘; }, false); drag.addEventListener(‘dragleave‘, function(e){ // 拖拽鼠標離開區域時 this.className = ‘‘; }, false); drag.addEventListener(‘drop‘, function(e){ // 當鼠標執行‘放’的動作時，執行讀取文件操作 var files = e.dataTransfer.files; this.className = ‘‘; if (files.length != 0) { checkFile(files); }; e.preventDefault(); }, false) drag.addEventListener(‘dragover‘, function(e){ // 當對象拖動到目標對象時觸發 e.dataTransfer.dragEffect = ‘copy‘; e.preventDefault(); }, false); 這里有個需要注意的地方：需要給dragover和drop添加阻止默認事件，否則瀏覽器會采用file:///的方式打開文件。drop事件執行后就是進行checkFile()，后續的操作與使用input[type=file]的操作一樣。
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
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); // 獲取圖片的原始的高度 獲取到圖片的原始尺寸后，就能做出‘查看原圖’的效果了。