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，本文不着重介紹這兩個方法，僅僅是講解如何使用。

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

<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 真是個好東西，還有着不少的東西等着咱們去挖掘。「躥騰吧，程序員」！