zoukankan      html  css  js  c++  java
  • HTML5之FileReader小结

    方法:

    方法名 参数 描述
    abort none 中断读取
    readAsBinaryString file 将文件读取为二进制码
    readAsDataURL file 将文件读取为 DataURL
    readAsText file, [encoding] 将文件读取为文本
    readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
    readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
    readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

    FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件:

    事件 描述
    onabort 中断时触发
    onerror 出错时触发
    onload 文件读取成功完成时触发
    onloadend 读取完成触发,无论成功或失败
    onloadstart 读取开始时触发
    onprogress 读取中
    文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值(this.result)。

    示例代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>File Test</title>
    </head>
    <script type="text/javascript">
        var result = document.getElementById("result");
        var file = document.getElementById("file");
    
        //判断浏览器是否支持FileReader接口
        if (typeof FileReader == 'undefined') {
            result.InnerHTML = "<p>你的浏览器不支持FileReader接口!</p>";
            //使选择控件不可操作
            file.setAttribute("disabled", "disabled");
        }
    
        function readAsDataURL() {
            //检验是否为图像文件
            var file = document.getElementById("file").files[0];
            if (!/image/w+/.test(file.type)) {
                alert("看清楚,这个需要图片!");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                var result = document.getElementById("result");
                //显示文件
                result.innerHTML = '<img src="' + this.result + '" alt="" />';
            }
        }
    
        function readAsBinaryString() {
            var file = document.getElementById("file").files[0];
            var reader = new FileReader();
            //将文件以二进制形式读入页面
            reader.readAsBinaryString(file);
            reader.onload = function (f) {
                var result = document.getElementById("result");
                //显示文件
                result.innerHTML = this.result;
            }
        }
    
        function readAsText() {
            var file = document.getElementById("file").files[0];
            var reader = new FileReader();
            //将文件以文本形式读入页面
            reader.readAsText(file);
            reader.onload = function (f) {
                var result = document.getElementById("result");
                //显示文件
                result.innerHTML = this.result;
            }
        }
    </script>
    <body>
    <p>
        <label>请选择一个文件:</label>
        <input type="file" id="file"/>
        <input type="button" value="读取图像" onclick="readAsDataURL()"/>
        <input type="button" value="读取二进制数据" onclick="readAsBinaryString()"/>
        <input type="button" value="读取文本文件" onclick="readAsText()"/>
    </p>
    <div id="result" name="result"></div>
    </body>
    </html>

  • 相关阅读:
    PHPUnit断言详情
    dev tools杂谈
    sublime text3 + python3.5 ide
    文件传输接收sz、rz命令用法
    Linux编辑器vi使用方法详细介绍
    vi编辑字符串替换及sed用法
    Selenium实战(一)——浏览器实例
    Python的数据库连接
    Cypress测试框架——一个简单的测试用例
    Cypress测试框架——入门1
  • 原文地址:https://www.cnblogs.com/archermeng/p/7537088.html
Copyright © 2011-2022 走看看