html5從一開始就給開發者很多的期待，提供衆多新的API，不用再想以前一樣，為了實作某個功能寫很多的代碼。在以前，如果要實作圖檔預覽會怎麼做呢，因為為了安全的原因，web端的js是不能讀取檔案的本地真實路徑的，那麼隻能将圖檔上傳到伺服器上，然後再拿到圖檔的連結，這樣才能實作圖檔預覽。而伺服器呢，比如有兩個檔案夾，一個是臨時檔案夾，一個是正式檔案夾，臨時檔案夾會定時進行清理，正式檔案夾是使用者确認使用的圖檔存儲的位置。
1. fileReader
現在HTML5提供的API不再讓圖檔預覽那麼麻煩，FileReader提供了很多的方法來進行圖檔預覽和文本讀取，同時也提供了一整套完整的事件來捕獲檔案的狀态，如下：
FileReader接口的方法FileReader接口有4個方法，其中3個用來讀取檔案，另一個用來中斷讀取。無論讀取成功或失敗，方法并不會傳回讀取結果，這一結果存儲在result屬性中。
FileReader接口包含了一套完整的事件模型，用于捕獲讀取檔案時的狀态。
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;
}
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的字元串，
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]的操作一樣。
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 真是個好東西，還有着很多的東西等着我們去挖掘。
從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular架構等到移動端HTML5的項目實戰【視訊＋工具＋系統路線圖】都有整理，線上解析，學習指導，點：【WEB前端學習圈⑤】