html5從一開(kāi)始就給開(kāi)發(fā)者很多的期待墩莫，提供眾多新的API翅敌，不用再想以前一樣羞福，為了實(shí)現(xiàn)某個(gè)功能寫很多的代碼。在以前蚯涮，如果要實(shí)現(xiàn)圖片預(yù)覽會(huì)怎么做呢治专，因?yàn)闉榱税踩脑颍瑆eb端的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ù)覽那么麻煩敌厘，F(xiàn)ileReader提供了很多的方法來(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屬性中箭窜。

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

2. 使用fileReader讀取圖片

從上面的表格中，我們可以大致了解fileReader提供哪些方法和事件竹捉，不過(guò)本文主要是講解圖片的讀取芜辕，那么我們就是用readAsDataURL()就可以了。不過(guò)块差，在進(jìn)行這一切之前侵续，我們必須檢測(cè)當(dāng)前的瀏覽器是否支持html5的fileReader倔丈，別進(jìn)行了一系列的處理和操作，結(jié)果js報(bào)錯(cuò)状蜗，說(shuō)fileReader沒(méi)有定義需五。就好像對(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)聽(tīng)這個(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事件沒(méi)有改動(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)離開(kāi)區(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:///的方式打開(kāi)文件苍匆。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騰吧宣吱，程序員”杭攻！

轉(zhuǎn)載自：http://www.xiabingbao.com