言

HTML5 中提供的文件API在前端中有著豐富的應(yīng)用，上傳、下載、讀取內(nèi)容等在日常的交互中很常見。而且在各個(gè)瀏覽器的兼容也比較好，包括移動(dòng)端，除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每個(gè)API。

FileList 對象和 file 對象

HTML 中的 input[type="file"] 標(biāo)簽有個(gè) multiple 屬性，允許用戶選擇多個(gè)文件，F(xiàn)ileList對象則就是表示用戶選擇的文件列表。這個(gè)列表中的每一個(gè)文件，就是一個(gè) file 對象。

file 對象的屬性：

• name : 文件名，不包含路徑。
• type : 文件類型。圖片類型的文件都會(huì)以 image/ 開頭，可以由此來限制只允許上傳圖片。
• size : 文件大小。可以根據(jù)文件大小來進(jìn)行其他操作。
• lastModified : 文件最后修改的時(shí)間。

<input type="file" id="files" multiple>
<script>
 var elem=document.getElementById('files');
 elem.onchange=function (event) {
 var files=event.target.files;
 for (var i=0; i < files.length; i++) {
 // 文件類型為 image 并且文件大小小于 200kb
 if(files[i].type.indexOf('image/') !==-1 && files[i].size < 204800){
 console.log(files[i].name);
 }
 }
 }
</script>

input 中有個(gè) accept 屬性，可以用來規(guī)定能夠通過文件上傳進(jìn)行提交的文件類型。

accept="image/*" 可以用來限制只允許上傳圖像格式。但是在 Webkit 瀏覽器下卻出現(xiàn)了響應(yīng)滯慢的問題，要等上好幾秒才彈出文件選擇框。

解決方法就是將 * 通配符改為指定的 MIME 類型。

<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">

Blob 對象

Blob 對象相當(dāng)于一個(gè)容器，可以用于存放二進(jìn)制數(shù)據(jù)。它有兩個(gè)屬性，size 屬性表示字節(jié)長度，type 屬性表示 MIME 類型。

如何創(chuàng)建

Blob 對象可以使用 Blob() 構(gòu)造函數(shù)來創(chuàng)建。

var blob=new Blob(['hello'], {type:"text/plain"});

Blob 構(gòu)造函數(shù)中的第一個(gè)參數(shù)是一個(gè)數(shù)組，可以存放 ArrayBuffer對象、ArrayBufferView 對象、Blob對象和字符串。

Blob 對象可以通過 slice() 方法來返回一個(gè)新的 Blob 對象。

var newblob=blob.slice(0,5, {type:"text/plain"});

slice() 方法使用三個(gè)參數(shù)，均為可選。第一個(gè)參數(shù)代表要從Blob對象中的二進(jìn)制數(shù)據(jù)的起始位置開始復(fù)制，第二個(gè)參數(shù)代表復(fù)制的結(jié)束位置，第三個(gè)參數(shù)為 Blob 對象的 MIME 類型。

canvas.toBlob() 也可以創(chuàng)建 Blob 對象。toBlob() 使用三個(gè)參數(shù)，第一個(gè)為回調(diào)函數(shù)，第二個(gè)為圖片類型，默認(rèn)為 image/png，第三個(gè)為圖片質(zhì)量，值在0到1之間。

var canvas=document.getElementById('canvas');
canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);

下載文件

Blod 對象可以通過 window.URL 對象生成一個(gè)網(wǎng)絡(luò)地址，結(jié)合 a 標(biāo)簽的 download 屬性來實(shí)現(xiàn)下載文件功能。

比如把 canvas 下載為一個(gè)圖片文件。

var canvas=document.getElementById('canvas');
canvas.toBlob(function(blob){
 // 使用 createObjectURL 生成地址，格式為 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36
 var url=URL.createObjectURL(blob);
 var a=document.createElement('a');
 a.download='canvas';
 a.href=url;
 // 模擬a標(biāo)簽點(diǎn)擊進(jìn)行下載
 a.click();
 // 下載后告訴瀏覽器不再需要保持這個(gè)文件的引用了
 URL.revokeObjectURL(url);
});

也可以將字符串保存為一個(gè)文本文件，方法類似。

FileReader 對象

FileReader 對象主要用來把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。通過構(gòu)造函數(shù)創(chuàng)建一個(gè) FileReader 對象

var reader=new FileReader();

該對象有以下方法：

• abort：中斷讀取操作。
• readAsArrayBuffer：讀取文件內(nèi)容到ArrayBuffer對象中。
• readAsBinaryString：將文件讀取為二進(jìn)制數(shù)據(jù)。
• readAsDataURL：將文件讀取為data: URL格式的字符串。
• readAsText：將文件讀取為文本。

上傳圖片預(yù)覽

在常見的應(yīng)用就是在客戶端上傳圖片之后通過 readAsDataURL() 來顯示圖片。

<input type="file" id="files" accept="image/jpeg,image/jpg,image/png">
<img src="blank.gif" id="preview">
<script>
 var elem=document.getElementById('files'),
 img=document.getElementById('preview');
 elem.onchange=function () {
 var files=elem.files,
 reader=new FileReader();
 if(files && files[0]){
 reader.onload=function (ev) {
 img.src=ev.target.result;
 }
 reader.readAsDataURL(files[0]);
 }
 }
</script>

但是在一些手機(jī)上豎著拍照上傳照片時(shí)會(huì)有bug，會(huì)發(fā)現(xiàn)照片倒了，包括三星和iPhone。。。解決方案這里不做講解，有興趣可以查看：移動(dòng)端圖片上傳旋轉(zhuǎn)、壓縮的解決方案

數(shù)據(jù)備份與恢復(fù)

FileReader 對象的 readAsText() 可以讀取文件的文本，結(jié)合 Blob 對象下載文件的功能，那就可以實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出文件備份到本地，當(dāng)數(shù)據(jù)要恢復(fù)時(shí)，通過 input 把備份文件上傳，使用 readAsText() 讀取文本，恢復(fù)數(shù)據(jù)。

代碼跟上面功能類似，這里不重復(fù)，具體的應(yīng)用可以參考：notepad

Base64 編碼

在 HTML5 中新增了 atob 和 btoa 方法來支持 Base64 編碼。它們的命名也很簡單，b to a 和 a to b，即代表著編碼和解碼。

var a="https://lin-xin.github.io";
var b=btoa(a);
var c=atob(b);
console.log(a); // https://lin-xin.github.io
console.log(b); // aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==console.log(c); // https://lin-xin.github.io

btoa 方法對字符串 a 進(jìn)行編碼，不會(huì)改變 a 的值，返回一個(gè)編碼后的值。atob 方法對編碼后的字符串進(jìn)行解碼。

但是參數(shù)中帶中文，已經(jīng)超出了8位ASCII編碼的字符范圍，瀏覽器就會(huì)報(bào)錯(cuò)。所以需要先對中文進(jìn)行 encodeURIComponent 編碼處理。

var a="哈嘍 世界";
var b=btoa(encodeURIComponent(a));
var c=decodeURIComponent(atob(b));
console.log(b); // JUU1JTkzJTg4JUU1JTk2JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThD
console.log(c); // 哈嘍 世界

https://zhuanlan.zhihu.com/p/27677175

older Responsive Html5 Theme

zCumbeton – Free Responsive Html5 Theme

Kataklimt Responsive Html5 Theme

Zparalexy Responsive Html5 Theme

zBoomMusic – Free Responsive Html5 Theme

Response Responsive Html5 Theme

VividPhoto Responsive HTML5 and CSS3 Template

Respond Responsive Html5 Theme

Brownie Responsive Html5 Theme

Triangle Responsive Html5 Theme

LiquidGem Responsive Html5 Theme

Hosting Website – Free Html5 Responsive Template

Flexapp Responsive Html5 Theme

Designa Responsive Html5 Theme

Accentbox Responsive Html5 Theme

OnePager Responsive Html5 Theme

Simpler Responsive Html5 Theme

Free ABC Responsive Templates

Free Modu Responsive HTML 5 Template

Sunrise – A free responsive HTML5 theme

Resond Free responsive HTML5 template