HTML5文件API之圖片預(yù)覽

圖片上傳在當(dāng)今的Web應(yīng)用中是一個(gè)非常常用的功能，如果不需要在上傳前進(jìn)行圖片預(yù)覽則可以簡單的使用HTML+Javascript來實(shí) 現(xiàn)，但如果一定要在上傳之前提供圖片預(yù)覽功能則需要求助于Flash來實(shí)現(xiàn)。不過，隨著HTML5 File API的誕生這一狀況終于有了改觀，本文將介紹如何使用HTML5 File API快速的實(shí)現(xiàn)圖片預(yù)覽功能。

瀏覽器支持情況

本文實(shí)現(xiàn)的功能在以下瀏覽器中經(jīng)過測試：IE8、Firefox3.6、Chrome6.0、Opera10、Safari4。其中 Firefox3.6與Chrome6.0已經(jīng)實(shí)現(xiàn)了該標(biāo)準(zhǔn)（雖然并沒有完全遵循標(biāo)準(zhǔn)），其他瀏覽器均未實(shí)現(xiàn)。關(guān)于具體的兼容性問題，后文將詳細(xì)說明。

文件選擇與獲取

如今最常見的文件選擇方式是使用File Input元素，用戶通過該元素打開本機(jī)文件對(duì)話框?qū)ふ也⑦x擇相應(yīng)的文件，不過隨著HTML5 Drag Drop API的出現(xiàn)又增加了一種新的方式-用戶可以直接將本機(jī)的文件拖拽到Web頁面中。

方式一 <input type=”file”>

<input id=”fileSel” type=”file” onchange=”handleFiles(this.files)”>
<script type=”text/javascript”>

//獲取用戶選擇的文件

function handleFiles(files){

//遍歷files并處理

}

</script>

<input id="fileSel" type="file" onchange="handleFiles(this.files)">
<script type="text/javascript">

//獲取用戶選擇的文件

function handleFiles(files){

//遍歷files并處理

}

</script>

方式二 Drag & Drop

<div id=”fileDropRegion”>將 文件拖拽到此</div>
<script type=”text/javascript”>

//獲取用戶選擇的文件

var dr = document.getElementById(‘fileDropRegion’);

dr.addEventListener(“drop”,function(e){
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;

//獲取文件數(shù)組
var files = dt.files;
handleFiles(files);
},false);

function handleFiles(files){

//遍歷files并處理

}

</script>

<div id="fileDropRegion">將文件拖拽到此</div>
<script type="text/javascript">

//獲取用戶選擇的文件

var dr = document.getElementById('fileDropRegion');

dr.addEventListener("drop",function(e){
e.stopPropagation();
e.preventDefault();

var dt = e.dataTransfer;

//獲取文件數(shù)組
var files = dt.files;
handleFiles(files);
},false);

function handleFiles(files){

//遍歷files并處理

}

</script>

文件讀入與展示

通過上文中的方法我們獲取到了用戶選擇的文件數(shù)組，接下來就該操作其中的每一個(gè)文件了，如HTML5 File API描述的那樣，每個(gè)文件對(duì)象應(yīng)該包含以下屬性：

readonly attribute DOMString name;           //The name of the file.

readonly attribute unsigned long long size; //Represents the size of the Blob object in bytes.

readonly attribute DOMString type;            //The media type of the Blob

readonly attribute DOMString url;              //The URL representing the Blob object.

如果是上傳圖片則可以通過type屬性來進(jìn)行圖片格式過濾，并可以通過size屬性來控制圖片大小。對(duì)于這些屬性，F(xiàn)irefox與Chrome的 實(shí)現(xiàn)情況是出奇的一致，均只支持name、size和type屬性。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)