HTML5 學習FileReader介面程式碼實例分享9（圖）
1、FileReader概述
FileReader 物件允許Web應用程式非同步讀取儲存在使用者電腦上的檔案（或原始資料緩衝區）的內容，使用File 或Blob 物件指定要讀取的檔案或資料。
其中File物件可以是來自使用者在一個<input>元素上選擇檔案後傳回的FileList物件,也可以來自拖曳操作產生的DataTransfer物件,也可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後傳回結果。
2、FileReader介面方法
| #方法名稱 | 參數 | 描述 |
| readAsBinaryString | file | 將檔案讀取為二進位碼 |
| readAsText | file,[encoding] | #讀取檔案為文字 |
|
||
##readAsDataURL
file
| file#將檔案讀取為 | ArrayBuffer物件#abort |
| (none) | 中斷讀取運算 |
| #3、 FileReader介面 | 事件|
| #描述 |
資料讀取中斷時觸發
onerror
#資料讀取出錯時觸發
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Html5Test</title>
</head>
<body>
<article>
<header></header>
<section>
<p>
<lable>请选择一个文件：</lable>
<input type="file" id="file_reader">
<input type="button" value="读取图像" onclick="readAsDataUrl();">
<input type="button" value="读取二进制数据" onclick="readAsBinaryString();">
<input type="button" value="读取文本文件" onclick="readAsText();">
</p>
<p id="file_reader_result" name="file_reader_result">
<!-- 这里用来显示读取结果 -->
</p>
<script>
var file_reader_result = document.getElementById("file_reader_result");
// 检测浏览器是否支持FileReader
if (typeof FileReader == "undefined") {
file_reader_result.innerHTML = "您的浏览器不支持FileReader";
file.setAttribute('disabled', 'disabled');
}
// 将文件以Data Url形式读入页面
function readAsDataUrl(){
// 检查是否为图像文件
var f = document.getElementById("file_reader").files[0];
if (!/image\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传图片文件！";
return false;
};
var reader = new FileReader();
// 将文件以Data Url形式读入页面
reader.readAsDataURL(f);
reader.onload = function(e){
file_reader_result.innerHTML = '<img src="' + this.result + '" alt="图片" />';
}
}
// 将文件以二进制形式读入页面
function readAsBinaryString(){
// 检查是否为图像文件
var f = document.getElementById("file_reader").files[0];
if (!/image\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传图片文件！";
return false;
};
var reader = new FileReader();
// 将文件以二进制形式读入页面
reader.readAsBinaryString(f);
reader.onload = function(e){
file_reader_result.innerHTML = this.result;
}
}
// 将文件以文本形式读入页面 目前测试仅支持txt文件
function readAsText(){
// 检查是否是文本文件
var f = document.getElementById("file_reader").files[0];
if (!/text\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传文本文件！";
return false;
};
var reader = new FileReader();
// 将文件以文本形式读入页面
reader.readAsText(f);
reader.onload = function(e){
file_reader_result.innerHTML = this.result;
}
}
</script>
</section>
</article>
</body>
</html>以上是HTML5 學習FileReader介面程式碼實例分享9（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
電腦主機板內部介面都有什麼 推薦電腦主機板內部介面介紹
Mar 12, 2024 pm 04:34 PM
我們在電腦組裝的過程中，安裝過程雖然簡單，不過往往都是在接線上遇到問題，經常有裝機用戶誤將CPU散熱器的供電線插到了SYS_FAN上，雖然風扇可以轉動，不過在開機可能會有F1報錯“CPUFanError”，同時也導致了CPU散熱器無法智慧調速。下面裝機之家分享一下電腦主機板上CPU_FAN、SYS_FAN、CHA_FAN、CPU_OPT介面知識科普。電腦主機板上CPU_FAN、SYS_FAN、CHA_FAN、CPU_OPT介面知識科普1、CPU_FANCPU_FAN是CPU散熱器專用接口，12V工作
Go語言中常見的程式設計範式和設計模式
Mar 04, 2024 pm 06:06 PM
Go語言作為一門現代化的、高效的程式語言，擁有豐富的程式設計範式和設計模式可以幫助開發者編寫高品質、可維護的程式碼。本文將介紹Go語言中常見的程式設計範式和設計模式，並提供具體的程式碼範例。 1.物件導向程式設計在Go語言中，可以使用結構體和方法實現物件導向程式設計。透過定義結構體和給結構體綁定方法，可以實現資料封裝和行為綁定在一起的物件導向特性。 packagemaini
PHP介面簡介及其定義方式
Mar 23, 2024 am 09:00 AM
PHP介面簡介及其定義方式PHP是一種廣泛應用於Web開發的開源腳本語言，具有靈活、簡單、強大等特性。在PHP中，介面（interface）是一種定義多個類別之間公共方法的工具，實現了多態性，讓程式碼更加靈活和可重複使用。本文將介紹PHP介面的概念及其定義方式，同時提供具體的程式碼範例展示其用法。 1.PHP介面概念介面在物件導向程式設計中扮演著重要的角色，定義了類別應
NotImplementedError()的處理方案
Mar 01, 2024 pm 03:10 PM
報錯的原因在python中，Tornado中拋出NotImplementedError()的原因可能是因為未實作某個抽象方法或介面。這些方法或介面在父類別中聲明，但在子類別中未實作。子類別需要實作這些方法或介面才能正常運作。如何解決解決這個問題的方法是在子類別中實作父類別聲明的抽象方法或介面。如果您正在使用一個類別來繼承另一個類，並且您看到了這個錯誤，則應該在子類別中實作父類別中所有聲明的抽象方法。如果您正在使用一個接口，並且您看到了這個錯誤，則應該在實作該接口的類別中實作該接口中所有聲明的方法。如果您不確定哪些
Java 中介面與抽象類別在設計模式中的應用
May 01, 2024 pm 06:33 PM
介面和抽象類別在設計模式中用於解耦和可擴展性。介面定義方法簽名，抽象類別提供部分實現，子類別必須實作未實現的方法。在策略模式中，介面用於定義演算法，抽象類別或具體類別提供實現，允許動態切換演算法。在觀察者模式中，介面用於定義觀察者行為，抽象類別或具體類別用於訂閱和發布通知。在適配器模式中，介面用於適應現有類，抽象類或具體類可實現相容接口，允許與原有程式碼互動。
透視鴻蒙系統：功能實測與使用感受
Mar 23, 2024 am 10:45 AM
鴻蒙系統作為華為推出的全新作業系統，在業界引起了不小的轟動。作為華為在美國禁令之後的全新嘗試，鴻蒙系統被寄予了厚望和期待。近日，我有幸得到了一部搭載鴻蒙系統的華為手機，經過一段時間的使用和實測，我將分享一些關於鴻蒙系統的功能實測和使用感受。首先，讓我們來看看鴻蒙系統的介面和功能。鴻蒙系統整體採用了華為自家的設計風格，簡潔清晰，操作流暢。在桌面上，各種
PHP中的介面和抽象類別有何不同？
Jun 04, 2024 am 09:17 AM
介面和抽象類別用於建立可擴展的PHP程式碼，它們之間存在以下關鍵差異：介面透過實作強制執行，而抽象類別透過繼承強制執行。介面不能包含具體方法，而抽象類別可以。一個類別可以實作多個接口，但只能從一個抽象類別繼承。介面不能實例化，而抽象類別可以。
Java 中介面和抽象類別的內部類別實現
Apr 30, 2024 pm 02:03 PM
Java允許在介面和抽象類別中定義內部類別，為程式碼重複使用和模組化提供靈活性。介面中的內部類別可實現特定功能，而抽象類別中的內部類別可定義通用功能，子類別提供具體實作。
