在html4的年代，我們?nèi)绻诰W(wǎng)頁上呈現(xiàn)一張用戶本地的圖片，需要用戶先把圖片上傳到服務(wù)器，再根據(jù)服務(wù)器提供的圖片地址把圖片下載下來，才能把圖片在網(wǎng)頁上呈現(xiàn)出來。這一來二往，起碼已經(jīng)費了兩倍于這張圖片的流量了，更別說服務(wù)器為了存儲這張圖片所花費的資源以及用戶上傳錯了圖片的冤枉成本（因為在html4時代，用戶選擇好圖片后，往往只能看到圖片的文件名，而無法通過預(yù)覽圖來進(jìn)一步確認(rèn)這張圖片是否就是自己想要上傳的）。
html5提供了新玩法，光靠瀏覽器，就可以對本地的（其實也可以是遠(yuǎn)程的）文件（主要是圖片）進(jìn)行呈現(xiàn)、讀取、處理等操作，而這一切，則是通過html5 file api來實現(xiàn)的。
首先是數(shù)據(jù)結(jié)構(gòu)，html5定義了一個file對象類型來表示文件，每個file對象對應(yīng)一個文件。file對象有3個屬性：name、size、type。name是不包含路徑的文件名，size是以字節(jié)為單位的文件體積大小，type則是文件的MIME（例如image/jpg）。
file對象不單獨存在，而是以數(shù)組形式，存在一個名為FileList的數(shù)組中。那么，如何拿到這個FileList數(shù)組呢？目前，html5有兩個途徑可以拿到FileList，一是通過file類型的input，二是通過拖放操作的drop事件。
通過file類型的input獲取FileList
<input id="file-input" type="file" />
或html5新增的可進(jìn)行文件多選的multiple屬性：
<input id="file-input" type="file" multiple />
一般，我們都是給input:file綁上一個onchange事件，以便在用戶選定文件后，馬上進(jìn)行讀取文件等下一步操作：
//原生js
var inputElement = document.getElementById("file-input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
var fileList = this.files;
}
//jquery版
$('#file-input').on('change', function() {
var fileList = this.files;
});
通過拖放操作drop事件
首先要設(shè)定一個可供拖放的區(qū)域：
<div id="dropbox" style="width: 200px;height: 200px;"></div>
另外，為了能觸發(fā)drop事件，我們必須阻止dragenter和dragover事件的默認(rèn)行為：
var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
然后，我們就可以在drop事件的callback中，獲取到fileList：
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
怎么讀取或利用file對象呢？
html5提供了兩個方案：FileReader和ObjectUrl。
使用FileReader讀取file對象
首先需要實例化FileReader對象：
var reader = new FileReader();
利用FileReader讀取file對象是一個異步的過程，我們需要先為FileReader設(shè)置好load事件的callback，告知FileReader在讀取到file對象的數(shù)據(jù)后應(yīng)該進(jìn)行什么進(jìn)一步的操作：
reader.onload = function(e) {
document.getElementById("image").src = e.target.result;
}
上面這段代碼的意思是，F(xiàn)ileReader讀取到圖片的數(shù)據(jù)后，把數(shù)據(jù)（DataUrl）放到的src屬性里。
最后，就是通過FileReader不同的方法，來決定讀取file對象數(shù)據(jù)后用什么數(shù)據(jù)格式來存放，并實施讀?。?/p>
- readAsArrayBuffer(file) ：讀取file對象并存放為ArrayBuffer對象（ArrayBuffer對象是什么我暫時沒有搞清，應(yīng)該是一種為了高效存取數(shù)據(jù)而產(chǎn)生的數(shù)據(jù)結(jié)構(gòu)）。
- readAsText(file [, 'UTF-8']) ：以一般文本模式讀取file對象，值得注意的是，利用第二個參數(shù)（可選）可指定字符編碼。
- readAsDataURL(file) ：讀取file對象并存放為data: URL格式的字符串。
利用ObjectURL
ObjectURL相當(dāng)于文件的一個臨時路徑，此臨時路徑可隨時生成、隨時釋放，在本地瀏覽器使用起來時，與普通的url無異。
以把一張本地圖片顯示在頁面上為例：
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
此時，src形如：blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40
用這個src就能讓瀏覽器從本地讀取圖片。
這種方案相對用FileReader生成圖片的base64編碼并放到的src里來說，性能有了很大的提升。
比較這兩種讀取File對象的方案，F(xiàn)ileReader適合用來上傳文件，而ObjectURL則適合直接在瀏覽器進(jìn)行操作，然后操作后再把處理后的數(shù)據(jù)進(jìn)行上傳，例如利用canvas截圖或進(jìn)行圖片壓縮等。當(dāng)然，這一切都是要考慮兼容性的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
