在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="/static/imghwm/default1.png" data-src=" + reader.result +" class="lazy" / alt="HTML5 FileAPI圖程式碼分享" >";
};
}
}
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中文網其他相關文章！
HTML中的H5標籤是什麼？May 09, 2025 am 12:11 AMHTML中的H5標籤是第五級標題，用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次，提升可讀性和SEO。 2)結合CSS可定製樣式，增強視覺效果。 3)合理使用H5標籤，避免濫用，確保內容結構邏輯性。
H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AMHTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。
H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。
H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AMHTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。
H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AMH5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。
HTML5特徵：H5的核心May 04, 2025 am 12:05 AMHTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。
H5：探索最新版本的HTMLMay 03, 2025 am 12:14 AMhtml5isamajorrevisionofthehtmlStandardThatRevolutionsWebDevelopmentBybyIntroDucingNewSemanticeLementSemelementsandAndCapabilities.1）itenhancesCodereAdabilityAndSeowitability andSeowithelientsLike，and.2）
超越基礎：H5代碼中的高級技術May 02, 2025 am 12:03 AMH5的高級技巧包括：1.利用進行複雜圖形繪製，2.使用WebWorkers提升性能，3.通過WebStorage增強用戶體驗，4.實現響應式設計，5.利用WebRTC實現實時通信，6.進行性能優化和最佳實踐。這些技巧幫助開發者構建更動態、互動和高效的Web應用。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
記事本++7.3.1
好用且免費的程式碼編輯器
WebStorm Mac版
好用的JavaScript開發工具
