FileReader对象读取图像

最新推荐文章于 2023-02-16 10:07:24 发布
最新推荐文章于 2023-02-16 10:07:24 发布
阅读量963 收藏 1
点赞数
分类专栏： 项目所学 文章标签： FileReader对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41484766/article/details/83420276
版权
本文主要讲解如何利用FileReader对象读取并显示用户上传的图像。通过type=file的input标签获取图片文件，然后使用FileReader对象进行异步读取。当文件读取完成后，将内容赋值给img标签的src属性，从而实现在网页上显示上传的图片。在过程中，涉及到FileReader对象的属性、事件和方法，以及如何处理fileList对象和URL格式的字符串。
摘要由CSDN通过智能技术生成
  1. 在了解 FileReader之前首先介绍type为file的input标签，也就是，该标签是用来上传我们电脑上的文件的，而这篇主要内容是 FileReader对象读取图象，所以我们用input标签来上传图片。

2.下面来了解一下 FileReader对象：

  • FileReader对象的作用：允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。
  • FileReader对象的属性：
属性 描述
FileReader.error 表示在读取文件时发生的错误
FileReader.readyState FileReader状态的数字。等于0表示还没有加载任何数据；等于1表示数据正在被加载；等于2表示 已完成全部的读取请求。
FileReader.result 文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
  • FileReader对象的事件处理
事件 描述
FileReader.onabort 处理abort事件，该事件在读取操作被中断时触发。
FileReader.onerror 处理error事件，该事件在读取操作发生错误时触发。
FileReader.onload 处理load事件。该事件在读取操作完成时触发。
FileReader.onloadstart 处理loadstart事件。该事件在读取操作开始时触发。
FileReader.onloadend 处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
FileReader.onprogress 处理progress事件。该事件在读取Blob时触发。
  • FileReader对象的方法
方法 描述
FileReader.abort() 中止读取操作。在返回时，readyState属性为DONE。
FileReader.readAsArrayBuffer() 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
FileReader.readAsBinaryString() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
FileReader.readAsText() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
  • 下面来看看代码

html和css部分


<!DOCTYPE html>
<html>
   <head>
   	<meta charset="
最低0.47元/天 解锁文章
我们的故事只有我们不知道
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FileReader，将图像加载到网页中
zhou_xijian的博客
04-24 224
FileReader，将图像加载到网页中 FileReader允许访问本地文件系统并使用JavaScript加载文档。 这样就完成了用于选择本地文件的，因为此标记只能将该文件的内容与表单数据一起提供给服务器上的脚本。 相容性测试 当前的浏览器可以识别File API ，其中包括FileReader对象? 结果File API supported. 测试源代码： <script> i...
JavaScript使用readAsDataURL读取图像文件
12-10
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求...
HTML5 用FileReader对象读取图片
Hillbox
08-14 805
FileReader.readAsDataURL(File对象)方法，可将File转位base64格式。
html5 filereader 读取图片信息
weixin_33766168的博客
03-24 151
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &am
关于FileReader的使用，可实现图片即时预览的案例
青菜大战僵尸的博客
07-23 152
FileReader的使用FileReader介绍案例说明即时显示案例 FileReader介绍 FileReader:读取文件内容 readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8 readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看的，而是存储文件。例如：读取文件的内容，获...
使用FileReader在浏览器读取预览文件(image和txt)
weixin_30591551的博客
03-22 1312
如标题,之前在某个地方看到因为有Blob的存在,理论上可以在浏览器上查看所有格式的文件.自己想着试试现在暂时只能够查看图片和预览txt文件.其他的比如doc,docx格式的文件查看的时候是乱码 如图:可以多选照片查看,可以查看txt文件 不说多了,主要是利用filereader读取blob转成base64或者直接读取文本然后展示.代码如下: <!DOCTYPE html> <h...
Js读取图像的元数据
05-03
通过`<input type="file">`元素可以让用户选择文件，然后使用FileReader对象的`readAsDataURL()`或`readAsArrayBuffer()`方法读取文件。 2. **EXIF.js库**：`exif-js-master`这个压缩包很可能包含一个名为`exif.js`...
JavaScript程序设计-FileReader对象的使用.pdf
11-02
FileReader对象的事件监听机制也是其核心特性之一，通过监听不同事件，我们可以捕获读取文件过程中的状态： - `onabort`：当读取操作被中断时触发。 - `onerror`：在读取过程中发生错误时触发。 - `onload`：文件...
javascript结合fileReader 实现上传图片
12-01
FileReader对象提供了多种方法来读取Blob（二进制大对象）或File对象，如readAsText、readAsDataURL和readAsArrayBuffer等。在这个场景中，我们使用`readAsDataURL`方法，因为它可以将文件读取为一个数据URL，这非常...
IO:如何使用FileReader来读取文件
ma451152002的专栏
09-09 4627
IO:如何使用FileReader来读取文件：package net.nyist.io; import java.io.FileReader; import java.io.IOException; public class FileReaderTest { public static void main(String[] args){ try( //创建
JavaScript通过filereader接口读取文件
10-19
主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
FileReader：读取本地图片文件并显示
qq_18932003的博客
01-27 343
FileReader：读取本地图片文件并显示 https://www.cnblogs.com/Nick-chen/p/6438564.html h5上传图片的两种方法 https://blog.csdn.net/qq_40717869/article/details/81129594 js实现上传图片回显功能 https://www.cnblogs.com/wlxstyl...
Js FileReader图片加载，预处理本地缓存图片
qq_43305958的博客
08-31 843
Js FileReader图片加载一、FileReader是什么？二、使用步骤总结 FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 一、FileReader是什么？ FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 二、使用步骤 //获取文件名字的后缀名 const prefix = img.name.split('.')[1] if (prefix !== 'jpg' && prefix !
使用FileReader对象的readAsDataURL方法来读取图像文件
热门推荐
火星男孩的分享空间
04-19 4万+
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA......使用
Js FileReader图片加载
weixin_30411239的博客
10-24 120
FileReader FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 方法 方法定义描述 abort():void 终止文件读取操作 readAsArrayBuffer(file):void 异步按字节读取文件内容，结果用Ar...
FileReader()读取文件、图片上传预览
油墨香^-^的博客
02-16 2348
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个htmlCanvasElement上执行mozGetAsFile()方法后返回结果。
利用HTML5新特性FileReader判断上传图片的分辨率比例
Demon's blog
06-06 230
利用HTML5新特性FileReader判断上传图片的分辨率比例
116JS-文件读取显示预览图片FileReader=121
Gy_9543的博客
07-31 148
文件读取 FileReader var reader = new FileReader(); //异步方法 reader.readAsDataURL('文件'); reader.onload = function () { console.log(reader.result); } 实例 // 选择文件上传控件 var file = document.querySelector('#file'); var preview =document.querySelector('
一分钟学会使用js读取上传图片文件
object not found的博客
09-05 1万+
显示一个图片，除了直接放文件路径，还可以放Base64当我们用file选择一个文件时，我们希望能够读取到文件路径，然后显示到一个img上或许你会想利用value值显示，input:file上确实有value但是这个value不能用fileReader，尽量先监听，然后再读取，好了不废话了直接看代码吧。
filereader读取文件
最新发布
08-07
使用 FileReader 可以读取多种类型的文件，例如文本文件、图像文件、音频文件等。 读取文件的过程是异步的，即读取文件的同时可以进行其他的操作。 使用 FileReader 的基本步骤如下： 1. 创建 FileReader 对象： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值