文件预览和文件读取方式（FileReader）

最新推荐文章于 2022-01-12 09:07:58 发布
最新推荐文章于 2022-01-12 09:07:58 发布
阅读量359 收藏 1
点赞数 2
分类专栏： readAsDataURL 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43896031/article/details/114454661
版权

文件预览和文件读取方式

有些电商平台中需要用户上传自己的文件来展示自己的商品，那么怎样上传文件又如何读取文件呢？

首先创建文件读取对象

在这里插入图片描述

然后我们需要指定读取的文件对象

我们用readAsDataURL指定读取对象，如果我们上传的是图片会获取图片的地址。如果我们上传的是文件，想要获取文件中的内容可以用reader.readAsText(this.files[0]); //读取文本
在这里插入图片描述

接下来读取成功 触发load事件 传递读取结果请求

如果我们用readAsDataURL指定读取对象，读取的结果会是一串地址。
在这里插入图片描述

第二种文件读取方式

我们可以监听onchange事件，传入读取对象，生成虚拟地址
在这里插入图片描述

weixin_43896031
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript通过filereader接口读取文件
10-19
主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
input file 多张图片上传 获取地址 ——fileReader
weixin_30414305的博客
06-14 153
//上传图片 $('#files').change(function(e){ var fil = this.files; var m =0; if(fil.length>3){ alert('重新选择') }else{ for (var i = 0; i < fil.length; i++) { if($('.img_l...
FileReader和FileWirter
sirius_black_tea的博客
09-22 166
显然，这是两种“字符流”，FileReader是“文件字符输入流”，FileWriter是“文件字符输出流”。与前一篇文章的FileInputStream和FileOutputStream非常类似 这是一个FileReader类的例子： public class FileReaderTest01 { public static void main (String[] args) { ...
文件上传中如何拿到数据
zt199718的博客
08-02 286
文件上传（单个） base64 设置请求头 headers:{ ‘Content-Type’:‘application/x-www-form-urlencoded’ }, //拿到file let reader = new FileReader; reader.readAsDataURL(file); reader.onload = (ev)=> { //ev.target.result 读出的base64格式 console.log(ev) //图片预览 th
HTML5-04.新增API-文件读取
人间清醒
03-20 328
通过FileReader 对象我们可以读取本地存储的文件，使用File 对象来指定所要读取的文件或数据； 其中File 对象可以是来自用户在一个元素上，选择文件后返回 FileList 对象，也可以来自由拖放 操作生成的DataTransfer; Files 对象 由于HTML5中我们可以通过为表单元素添加 multiple 属性； 因此我们通过<input>上传文件后得到的...
FileReader()读取文件、图片上传预览
web前端开发
01-12 2265
作者 |不知名前端李小白来源 | https://www.cnblogs.com/libo-web/p/15766987.html前言FileReader 对象允许Web应用程序异步读取...
JS中FileReader类实现文件上传及时预览功能
01-19
FileReader是H5浏览器才支持的JS类，如果不支持H5de浏览器可以使用FormData类实现文件的上传预览，使用可以参考我的下一篇博客：JS中FormData类实现文件上传 代码： <!DOCTYPE html> <html lang=en> <...
JS+HTML5 FileReader实现文件上传前本地预览功能
12-10
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并...
JavaSctit 利用FileReader和滤镜上传图片预览功能
08-29
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件内容，使用 File或 Blob对象指定要读取的文件或数据。下面通过本文给大家分享JavaSctit 利用FileReader和滤镜上传图片预览功能，需要的朋友参考下吧
fileReader和URL.createobjecturl
Anton的博客
01-18 705
https://www.cnblogs.com/saysmy/p/5626337.html
FileReader：读取本地图片文件并显示
经验在于积累而不在于年限---dreamboycx
08-22 1508
要想在页面上显示本地图片，以前我们通常的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader接口，所以像IE6这些老东西直接滚粗
FileReader详解
石璞东
03-14 6990
我在Google Chrome Web Store上发布了一个案例hahaOCR，该扩展程序可以帮助用户识别出图片中的文字信息，并以文本形式显示，大家可以在chrome网上应用商店中找到我发布的应用程序，如图所示： 图1 - hahaOCR 该扩展程序支持用户通过文件上传按钮上传图片，请看演示效果： 图2 - 测试图片 图3 - 测试效果 接下来，我们将在本文中详细讲解该案例所涉及的文件（图片）处理模块。 参考资料 MDN Web Docs：https://developer.mozilla.o
ArrayBuffer 实践
taokexia的博客
04-16 391
ArrayBuffer 实践 ArrayBuffer对象、TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口。都是以数组的语法处理二进制数据，所以统称为二进制数组。主要用于二进制数据的通信。 ArrayBuffer 以数组的形式直接操作内存，提升了脚本的性能。二进制数组由三类对象组成。 ArrayBuffer 对象 TypedArray 视图 D...
java中关于读取读取文件路径问题
记录点滴
06-20 2435
关于文件路径的问题 上边在new FileReader() 时，用到了一个文件路径，上边我是在IDEA中的文件路径，但是如果文件换了一个地方，文件的路径也需要跟着改变，移植性太差了！ 下边记录一种通用的方法，即使代码换了位置了，这样编写也是通用的： 注意： 使用以下前提是文件必须在类路径下，类路径：凡是在src下的都是类路径。 拿到一个文件的绝对路径： package com.lxc.domain; import java.io.FileNotFoundException; import.
FIleReader
zhanghuiyu01的博客
04-02 2341
FIleReader HTML5 参考链接：https://www.cnblogs.com/hhhyaaon/p/5929492.html https://www.cnblogs.com/makan/p/4807086.html 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据...
js利用FileReader读取本地文件或者blob
热门推荐
first_shun的博客
06-15 1万+
FileReader对象提供了异步读取存储在用户计算机上的文件的内容，使用 File或 Blob对象指定要读取的文件或数据，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 一、FileReader的使用 注意：如果需要兼容低版本的浏览器，需要判断一下FileReader对象是否存在。 if (window.FileReader) { let reader = new FileReader(); } else { console.log('你的浏览器不支持读取文件'); .
filereader读取文件
最新发布
09-02
### 回答1： 好的，您想了解如何使用JavaScript中的FileReader对象来读取文件。首先，您需要创建一个FileReader对象，然后使用它的readAsText()方法读取文件内容。以下是一个简单的示例： ```javascript // 创建一个FileReader对象 var reader = new FileReader(); // 读取文件 reader.readAsText(file); // 当读取完成时，执行回调函数 reader.onload = function(event) { var contents = event.target.result; console.log(contents); }; ``` 在这个示例中，我们首先创建一个FileReader对象。然后，我们使用它的readAsText()方法来读取一个文件。该方法接受一个File对象作为参数，该对象代表要读取的文件。在这个例子中，我们假设已经有一个名为file的File对象。 当读取完成后，FileReader对象将触发一个load事件。我们可以通过在FileReader对象的onload属性上设置一个回调函数来捕获这个事件。在回调函数中，我们可以通过调用event.target.result来获取文件的内容。在这个例子中，我们简单地将内容打印到控制台上。 请注意，由于读取文件是异步操作，因此我们需要等待读取完成后才能访问文件的内容。因此，我们将回调函数分配给FileReader对象的onload属性，以便在读取完成时自动调用。 ### 回答2： FileReader 是一种用于读取文件内容的JavaScript 对象。当我们需要读取一个文本文件中的内容时，可以使用FileReader 对象。FileReader 对象提供了一系列的方法和属性，使我们能够以异步的方式读取文件。 要使用FileReader 对象来读取文件，我们需要先创建一个FileReader 实例，然后通过其方法来读取文件。首先，我们需要使用input 元素的type 属性设置为“file”，这样可以让用户选择一个本地的文件。接着，我们在JavaScript中获取到选择的文件对象，并使用FileReader 实例的readAsText() 方法来读取文件内容。readAsText() 方法的参数可以指定文件编码类型，一般情况下我们可以使用默认的UTF-8 编码。 在读取文件内容的过程中，FileReader 对象会触发onload 事件，我们可以通过监听这个事件来获取到文件内容。在onload 事件的回调函数中，我们可以通过FileReader 实例的result 属性获取到文件的内容。可以通过调用FileReader 实例的readAsDataURL() 方法来将读取到的文件内容转换为数据URL，然后可以将这个URL 用于显示文件的预览或者动态加载文件。 总结来说，FileReader 提供了一种方便的方式来读取文本文件的内容。通过其方法和事件，我们能够以异步的方式读取文件内容，并可以对文件进行一系列的操作。使用FileReader 可以给我们的开发带来很大的便利，特别是在需要加载本地文件内容的场景下。 ### 回答3： FileReader是一个内置对象，可以用来读取文件内容。它提供了多种方法来读取不同类型的文件，如文本文件、图片文件等。使用FileReader对象是一种异步操作，可以通过注册事件监听器来处理读取完成后触发的事件。 首先，我们需要使用FileReader的构造函数创建一个实例，然后使用其中的方法来读取文件。常见的方法有readAsText()、readAsArrayBuffer()和readAsDataURL()。 readAsText()方法用于读取文本文件，它会将文件内容以字符串的形式返回。使用该方法时，我们需要为FileReader对象的onload事件注册一个监听器，该监听器会在读取完成后触发。在该监听器中，可以通过调用FileReader对象的result属性获取文件内容。 readAsArrayBuffer()方法用于读取二进制文件，如图片或音频文件。它会将文件内容以ArrayBuffer的形式返回。使用该方法时，同样需要为FileReader对象的onload事件注册监听器，然后在监听器中通过FileReader对象的result属性获取文件内容。 readAsDataURL()方法用于读取文件并将其转换为DataURL格式。DataURL是一种将文件内容编码为字符串的方式，可以用于在网页中显示图片。与之前的方法一样，需要注册onload事件监听器来获取文件内容。 总之，FileReader是用于读取文件内容的工具，提供了多种方法来满足不同类型的文件读取需求。读取文件时需要注册监听器，在监听器中获取文件内容并进行后续操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值