ホームページ > 記事 > ウェブフロントエンド > HTML5 FileReader インターフェイスの詳細な紹介
HTML5 FileReader インターフェイスの詳細な紹介
- 黄舟オリジナル
- 2017-04-13 10:31:021505ブラウズ
1. FileReader の概要
FileReader オブジェクトを使用すると、Web アプリケーションが File または Blob オブジェクトは、読み取るファイルまたはデータを指定します。 <code>File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个d5fd7aea971a85678ba271703566ebfd元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
2、FileReader接口方法
| 方法名 | 参数 | 描述 | ||||||||||||||
| readAsBinaryString | file | 将文件读取为二进制码 | ||||||||||||||
| readAsText | file,[encoding] | 将文件读取为文本 | ||||||||||||||
| readAsDataURL | file | 将文件读取为DataURL | ||||||||||||||
| readAsArrayBuffer | file |
将文件读取为ArrayBuffer对象File オブジェクトは、ユーザーが d5fd7aea971a85678ba271703566ebfd 要素でファイルを選択した後に返される FileList オブジェクトであることも、ドラッグ アンド ドロップ操作 >DataTransfer オブジェクト、または HTMLCanvasElement で mozGetAsFile() メソッドを実行した後に返される結果。
|
||||||||||||||
| メソッド名 | パラメータ | 説明
| readAsText file,[エンコーディング] | ファイルをテキストとして読み取るreadAsDataURL |
| file | データURLとしてファイルを読み取る |
| ReadAsArrayBuffer | ファイル |
| abort | |
| 読み取り操作を中断します | |
| 3. FileReader インターフェイスイベント |
onabort🎜🎜🎜🎜 データの読み取りが中断されたときにトリガーされます🎜 🎜🎜🎜🎜🎜onerror🎜🎜🎜🎜データの読み取りが中断されたときにトリガーされます🎜🎜🎜🎜🎜🎜onloadstart🎜🎜🎜🎜データの読み取りが開始されたときにトリガーされます🎜🎜🎜🎜🎜 🎜進行中🎜🎜🎜 🎜データ読み取り中🎜🎜🎜 🎜🎜🎜onload🎜🎜🎜🎜データの読み取りが正常に完了したときにトリガーされます🎜🎜🎜🎜🎜🎜onloadend🎜🎜🎜🎜成功または失敗に関係なく、データの読み取りが完了したときにトリガーされます🎜🎜🎜 🎜🎜 🎜🎜🎜🎜🎜🎜🎜 🎜🎜 🎜🎜 🎜🎜 🎜🎜4. 使用例 🎜
<!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 インターフェイスの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。