使用FileReader对象的readAsDataURL方法来读取图像文件

使用FileReader对象的readAsDataURL方法来读取图像文件readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,后面跟随的是MIMEtype,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA……使用

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,后面跟随的是MIME type,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。

readAsDataURL获取的base64字符串如下:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......

Jetbrains全家桶1年46,售后保障稳定

使用Img显示图像文件

若想要将读取出来的图像文件,直接显示在网页上,您可以透过JavaScript建立一个标签,再设定src属性为Data URL,再将<img>标签加入DOM之中,
例如以下范例所示:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function ProcessFile(e) { 
   
            var file = document.getElementById('file').files[0];
            if (file) { 
   
                var reader = new FileReader();
                reader.onload = function (event) { 
   
                    var txt = event.target.result;

                    var img = document.createElement("img");
                    img.src = txt;//将图片base64字符串赋值给img的src
                    document.getElementById("result").appendChild(img);
                };
            }
            reader.readAsDataURL(file);
        }

        function contentLoaded() { 
   
            document.getElementById('file').addEventListener('change',
                ProcessFile, false);
        }

        window.addEventListener("DOMContentLoaded", contentLoaded, false);
    </script>
</head>
<body>
请选取一个图像文件: <input type="file" id="file" name="file"/>
<div id="result"></div>
</body>
</html>

参考:

使用FileReader对象的readAsDataURL方法来读取图像文件

FileReader用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。

FileReader 的 result 可以有 3 种形式, 它取决于具体调用读取的方法
调用 reader. readAsArrayBuffer, 则 result 为 ArrayBuffer 对象
调用 reader. readAsText, 则 result 为 字符串
调用reader. readAsDataURL, 则 result 为 DataURL, DataURL 可直接 赋值给 img.src
调试发现 DataURL 是带头信息(/image) 的 base64(可能是) 编码的字符串

FileReader接口的使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>
<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>

参考:

HTML5学习之FileReader接口

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/209988.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 使用云服务器不得不知的操作禁忌

    使用云服务器不得不知的操作禁忌

  • pycharm开启自动补全_python代码补全插件

    pycharm开启自动补全_python代码补全插件在使用python时候我们可能更倾向于能够使用到自动补全代码的功能在一段时间的找寻和使用过程中,发现了几种能补全代码的插件和方法吧pycharm中TabNine插件 这个我感觉还能用吧~啧百度kite官网下载kite插件百度aiXcoder插件下载aiXcoder插件GitHub开源项目1.首先第一个TabNine的插件 亲测了一段时间,感觉很一般 如果想体验一下也不是不行 安装插件过程如下: pycharm编译器->File->Settings

  • java构造函数

    java构造函数

  • C语言和JAVA的区别[通俗易懂]

    C语言和JAVA的区别[通俗易懂]java语言和c语言的区别:un公司推出的Java是面向对象程序设计语言,其适用于Internet应用的开发,称为网络时代重要的语言之一。Java可以用认为是C的衍生语言,与C在大量元以内成分保持相同,例如此法结构、表达式语句、运算符等与C基本一致:但Java更简洁,没有C中冗余以及容易引起异常的功能成分,并且增加了多线程、异常处理、网络编程等方面的支持功能。本文从多角度对Java与C进行对比分析,为C与Java语言的学习提高一些借鉴。1、调法结构C与Java的词法结构很相似,针对程

  • 为什么python读取不了文件_python系统找不到指定文件怎么办

    为什么python读取不了文件_python系统找不到指定文件怎么办1、现象系统提示找不到指定的文件:Errorrunning’hello’:Cannotrunprogram”B:\pystudy\venv\Scripts\python.exe”(indirectory”\python-study”):CreateProcesserror=2,系统找不到指定的文件。2、原因原来的工程目录(B盘)下,保存了python的编译环境,包括pyth…

  • java https通讯,服务器代码与客户端代码,单向验证,ssl

    java https通讯,服务器代码与客户端代码,单向验证,ssljava https通讯,服务器代码与客户端代码,单向验证,ssl

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号