項(xiàng)目中碰到一個需求，上傳圖片及時給用戶預(yù)覽。
開始的想法就是上傳的圖片先傳遞到后臺，在通過ajax獲取圖片路徑顯示到前臺。但這樣做首先對后端開銷比較大，也需要專門寫一個接口來處理這個問題。能不能直接通過前端來解決呢？
翻了一下html5新的File API，發(fā)現(xiàn)有個FileReader類型，可以完美解決這個問題。
File API
file表單元素的files屬性，可以獲取文件對象數(shù)組。
通過file.files[0]可以獲取對應(yīng)的文件對象，一般有,larstModified,name,size,type幾個屬性。
<input type="file" id="file">
<script type="text/javascript">
var file = document.getElementById('file');
file.onchange = function() {
console.log(this.files[0].name, this.files[0].type, this.files[0].size);
}
</script>
當(dāng)然這對圖片上傳預(yù)覽沒什么用，重要的是FileReader類型：
FileReader
FileReader提供如下的幾個方法
-
readAsText(file [, encoding])：以純文本讀取文件，讀取到的結(jié)果返回。第二個參數(shù)為編碼類型，可選。 -
readAsDataURL(file)：將文件數(shù)據(jù)以URL的形式返回（常用來處理圖片）。 -
readAsBinaryString(file)：將文件以字符串形式返回（字符串中每個字符表示一字節(jié)）。 -
readAsArrayBuffer(file)：將文件內(nèi)容的ArrayBuffer返回。
FileReader提供了幾個事件
- progress：傳輸過程觸發(fā)的事件，事件對象有l(wèi)engthComputable, loaded, total, result屬性
- error：傳輸失敗觸發(fā)
- load：傳輸完成觸發(fā)
案例：
<body>
<input type="file" id="files">
<div id="progress"></div>
<div id="prvid">預(yù)覽容器</div>
<script type="text/javascript">
var files = document.getElementById('files');
var output = document.getElementById('prvid');
var progress = document.getElementById('progress');
files.onchange = function(ev) {
var file = ev.target.files[0];
var reader = new FileReader();
if (/image/.test(file.type)) {
reader.readAsDataURL(file);
type = 'image';
} else {
reader.readAsText(file);
type = 'text';
}
reader.onerror = function() {
output.innerHTML = '文件讀取失敗';
}
reader.onprogress = function(event) {
if (event.lengthComputable) {
progress.innerHTML = event.loaded + '/' + event.total;
}
}
reader.onload = function() {
var html = '';
switch(type) {
case 'image':
html = '';
break;
case 'text':
html = reader.result;
break;
}
output.innerHTML = html;
}
}
</script>
</body>
