Home > Article > Web Front-end > HTML5 learning FileReader interface code example sharing 9 (picture)

HTML5 learning FileReader interface code example sharing 9 (picture)

黄舟Original: 2017-03-13 17:27:011252browse

1, FileReader Overview

FileReader object allows web applications to asynchronously read files (or raw data buffers) stored on the user's computer. Content, use File or Blob objects to specify the file or data to be read.

The File object can be a FileList object returned after the user selects a file on an d5fd7aea971a85678ba271703566ebfd element, or it can be generated by a drag-and-drop operation. The DataTransfer object can also be the result returned after executing the mozGetAsFile() method on a HTMLCanvasElement.

2. FileReader interface method

Method name	Parameters	Description
##readAsBinaryString	file	Read the file as binary code
readAsText	file,[encoding]	Read file as text
readAsDataURL	file	Read file as DataURL
readAsArrayBuffer	file	Read the file as an ArrayBuffer object
abort	(none)	Abort read operation

3. FileReader interface

Event

##onabortData read interruption Triggered whenonerrorTriggered when data reading erroronloadstartTriggered when data reading startsonprogressData readingonloadTriggered when data reading is successfully completedonloadendTriggered when data reading is completed, regardless of success or failure

Event	Description

4. Use examples

<!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>

The above is the detailed content of HTML5 learning FileReader interface code example sharing 9 (picture). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Function example code analysis of various H5 header meta tagsNext article：Function example code analysis of various H5 header meta tags

See more

HTML5 learning FileReader interface code example sharing 9 (picture)

Related articles