HTML5 FileReader インターフェイスの詳細な紹介-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 FileReader インターフェイスの詳細な紹介

黄舟

Apr 13, 2017 am 10:31 AM

1. FileReader の概要

FileReader オブジェクトを使用すると、Web アプリケーションが File または Blob オブジェクトは、読み取るファイルまたはデータを指定します。 <code>File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

2、FileReader接口方法

2. FileReader インターフェイスメソッド

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
readAsArrayBuffer	file	将文件读取为`ArrayBuffer对象`File オブジェクトは、ユーザーが `<input>` 要素でファイルを選択した後に返される `FileList` オブジェクトであることも、ドラッグアンドドロップ操作 >DataTransfer オブジェクト、または `HTMLCanvasElement` で `mozGetAsFile() メソッドを実行した後に返される結果。`

メソッド名説明

パラメータ

readAsBinaryString

file

ファイルをバイナリコードとして読み取ります

ArrayBuffer オブジェクトとしてファイルを読み取ります(none)

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(&#39;disabled&#39;, &#39;disabled&#39;);
            }
            // 将文件以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 = &#39;<img src="&#39; + this.result + &#39;" alt="图片" />&#39;;
                }
            }
            // 将文件以二进制形式读入页面
            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 までご連絡ください。