HTML5 FileAPI圖程式碼分享
- 黄舟原創
- 2017-03-28 16:00:281705瀏覽
在HTML5中，提供了一個關於檔案操作的API，透過這個API，對於從web頁面存取本機檔案系統的相關處理變得十分簡單。到目前為止只有部分瀏覽器對它提供支援。
FileList物件表示使用者選擇的檔案列表，在HTML4中file控制項內只允許放置一個文件，但在HTML5中透過新增multiple屬性，file控制項內允許放置多個文件。控制項內的每個使用者選擇的檔案都是一個file對象，而FileList就是這些file對象的列表，代表使用者選擇的所有檔案。 file物件有兩個屬性，一個是name，代表檔案名稱不包含檔案的路徑；一個是lastModifiedDate，表示檔案最後被修改的日期。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title>FileList and File </title>
<script type="text/javascript" language="JavaScript">
function showFiles(){
var file,
len = document.getElementById('file').files.length;//返回FileList文件列表对象
for (var i=0; i < len; i++) {
file = document.getElementById('file').files[i];
alert(file.name);
};
}
</script>
</head>
<body>
<input type="file" id='file' multiple="multiple" width="80px"/>
<input type="button" id="bt1" value="click" onclick="showFiles();"/>
</body>
</html>2.Blob對象
提到Blob對象，估計有人會想起OracleDB中Blob字段，意義上有些類似。 HTML5中Blob表示二進位原始數據，它提供一個slice()方法，可以透過這個方法存取到位元組內部的原始資料塊。事實上，上面提到的file物件繼承了Blob物件。
Blob物件的兩個屬性，size：表示一個物件的位元組長度。 type：表示一個物件的MIME類型，如若是未知類型傳回空字串。
function showFileInfo(){
var file = document.getElementById('file').files[0];
var size = document.getElementById('fileType');
var type = document.getElementById('fileSize');
size.innerHTML = file.size;
type.innerHTML = file.type;
}
對於圖像類型的文件，Blob物件的type屬性都是以image/開頭，可以利用這個特性對使用者選擇的文件類型做判斷。
function showFileInfo(){
var file = document.getElementById('file').files[0];
if(checkImage(file)){
var size = document.getElementById('fileType');
var type = document.getElementById('fileSize');
size.innerHTML = file.size;
type.innerHTML = file.type;
}
else{
return ;
}
}
function checkImage(file){
if(!/img\/\w+/.test(file.type)){
alert(file.name + "不是图片");
return false;
}
return true;
}另外，file控制項在HTML5標準中加入了accept屬性，用來限制接受的檔案類型，但目前各瀏覽器對齊支援都僅限於在開啟檔案選擇視窗時預設的選擇影像檔案而已，如果選擇其他類型，控制項也能接受。
3.FileReader介面
3.1介面方法
FileReader介面提供了四個方法，其中3個用來讀取檔案，1個用來中斷文件的讀取。
| 方法名稱 | 參數 | 描述 |
| readAsBinaryString() | file | 將檔案讀取為二進位字串，通常會將它傳到後端，後端可以透過這段字串儲存檔案 |
| readAsDataURL( ) | file | 將檔案讀取為一段data url字串，事實上是將小檔案以一種特格式的URL位址直接讀取到頁面。小檔案通常指圖片與html等格式檔案 |
| readAsText() | file [encoding] | 將檔案以文字的方式讀取，其中第二個參數為文本的編碼。 |
| abort() | (none) | #中斷讀取操作。 |
#
需要注意的是，無論讀取成功或失敗，方法都不會回傳讀取結果，結果回傳在result屬性中。
3.2介面事件
FileReader介面提供了一套完整的事件模型，用於擷取讀取檔案時的狀態。
| 事件 | 描述 |
| #onabort | 資料讀取中斷時發生 |
| onerror | 資料讀取出錯時發生 |
| #onloadstart | 資料讀取開始時發生 |
| onload | 資料讀取成功完成時發生 |
| #onloadend | 資料讀取完成時發生無論讀取成功還是失敗 |
| onprogess | 資料讀取中 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>FileReader</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<script type="text/javascript" language="JavaScript">
var file ,
result;
function myLoad() {
file = document.getElementById('file').files[0];
result = document.getElementById('result');
}
if(typeof FileReader == 'undefined'){
result.innerHTML = "你的浏览器不支持 FileReader";
file.setAttribute("disabled","disabled");
}
function readAsDataURL(){
if(!/image\/\w+/.test(file.type)){
alert(file.name + '不是一个图片类型的文件');
}else{
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
result.innerHTML = "<img src=" + reader.result +"/>";
};
}
}
function readAsBinaryString(){
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e){
result.innerHTML = reader.result;
};
}
function readAsText(){
var reader = new FileReader();
reader.readAsText(file);
reader.onload=function(e){
result.innerHTML = reader.result;
};
}
</script>
</head>
<body onload="myLoad();">
<p>
<input type="file" id='file'/>
<input type='button' id="bt_DataURL" value="读取图片" onclick="readAsDataURL();"/>
<input type="button" id="bt_BinaryString" value="读取二进制字符串" onclick="readAsBinaryString();"/>
<input type="button" id="bt_textString" value="读取文本信息" onclick="readAsText();"/>
</p>
<div id="result">
</div>
</body>
</html>以上是HTML5 FileAPI圖程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！