FileReader：读取本地图片文件并显示

最新推荐文章于 2024-04-26 10:22:03 发布
最新推荐文章于 2024-04-26 10:22:03 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： Js Html 文章标签： FileReader：读取本地图片文件并显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzc1684/article/details/84755306
版权

 

 

查看演示

要想在页面上显示本地图片，以前我们通常的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返 回到前端，前端通过这个URL来显示图片。而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供 相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader接口，所以像IE6这些老东西直接滚粗。

在此之前，我们有文章：HTML5应用之文件拖拽上传，看完这篇文章后，你可以尝试制作一个拖拽和显示图片、编辑图片、最后上传的功能。

HTML

第一步创建html，我们在页面中放置一个文件选择的input#file_input和一个显示结果的div#result。

<p> 
   <label><
最低0.47元/天 解锁文章
zzc1684
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用 html5 FileReader 读取本地图片和文本文件
_being_的专栏
11-14 7457
预览本地文件 //预览图片 function previewImage() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader
HTML5 用FileReader对象读取图片
Hillbox
08-14 791
FileReader.readAsDataURL(File对象)方法，可将File转位base64格式。
【JS】前端文件读取FileReader操作总结
最新发布
yqdid的博客
04-26 3255
开发中经常遇到文件上传的场景，有时需要前端将文件内容读取出来再以base64格式传到接口
html5载入本地图片,HTML5之FileReader对象在浏览器中读取本地文件内容、预览图片...
weixin_39596975的博客
05-31 189
在一些项目中，经常会遇到图片上传的情况，为了提高用户体验，一般会要求选择图片后 能预览一下图片。以前的做法是 通过 ajax上传图片后，然后再显示出来，这样会产生大量的无用的图片文件，在HTML5的时代，有了FileReader对象，可以在浏览器选择本地的图片后，立马就可以在浏览器中显示选择的图片具体也不对说了，手册百度一搜就是，就贴一下示例代码Image preview exampleoFRea...
fileReader学习-前端展示本地图片
hongtaochi0464的博客
05-27 859
最近项目中会使用富文本编辑器，发现源码中有fileReader，来学习一下~ FileReader的学习 FileReader是一种异步文件读取机制，结合input:file可以方便的读取本地文件(图片/txt) 一、input的file类型 <input type=“file” id = “inputBox”> 在页面上的显示是这样的： 当你点击选择文件的按钮，便可以选择本地的文...
php readfile 图片,php的readfile能读图片吗
weixin_35975406的博客
03-11 240
php的readfile() 函数读取一个文件，并写入到输出缓冲。如果成功，该函数返回从文件中读入的字节数。如果失败，该函数返回 FALSE 并附带错误信息。您可以通过在函数名前面添加一个 '@' 来隐藏错误输出。 (推荐学习：PHP视频教程)语法readfile(filename,include_path,context)实例...
filereader:filereader，一个用于读取本地文件的 jQuery 扩展
06-26
文件阅读器filereader，一个用于读取本地文件的 jQuery 扩展这组实用程序允许我们直接从 jQuery 访问 HTML5 FileReader API。 可用功能： $.canReadFiles() 如果当前浏览器实现了 FileReader API，则返回 true $....
读取input:file的路径并显示本地图片的方法
09-05
在现代浏览器中，它使用`FileReader`读取文件并创建预览；而在旧版IE中，它会弹出文件路径，并使用滤镜加载图片。`onchange`事件绑定在`<input type="file">`上，当用户选择文件时触发预览。 请注意，实际应用中...
Html读取本地文件夹下图片并显示的示例代码
12-13
在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有图片并显示在页面。 技术分析： 存在问题 Html中file标签获取到的路径时相对的。 Html中Img指定源时需要的是绝对路径。 解决方法： 调用Web API接口...
fileReader:PHP文件管理器
06-13
2. 文件上传：允许用户通过网页上传本地文件到服务器指定位置。 3. 文件下载：用户可以下载服务器上的文件到本地。 4. 文件编辑：如果支持的话，用户可以在线编辑文本文件，如.txt或.csv等。 5. 文件操作：包括...
HTML5 文件域+FileReader 读取文件(一)
weixin_34006965的博客
03-21 306
 在HTML5以前，HTML的文件上传域的功能具有很大的局限性，这种局限性主要体现在如下两点： 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径，无法访问实际的文件内容 一、FileList对象和File对象 HTML5为type='file' 的&lt;input/&gt;元素增加了两个属性。 accept:该属性控制允许上传的文件类型。该属性为一个或多...
基于JavaScript FileReader上传图片显示本地链接
01-19
简介 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type=”text” />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果. 页面中多个，上传多个图片DEMO代码 <!Doctype html> <html> <head> <title>上传图片显示预览
html5 filereader对象读取本地文件、图像
qq_26702033的博客
03-21 6809
在html5之前在本地上传图片后预览的方法是，以前我们通常的做法是将选择的图片文件通过ajax上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。 而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader...
FileReader读取文件
weixin_52398973的博客
03-15 1329
基于该对象，我们可以实现对选中的读取操作fileReader读取的文件需要从input中获取let file = this.files[0] // 就是我们选中的文件fileReader.readAsDataURL(file) // 读是一个异步操作。需要在fileReader的onload事件中获取对应的结果给fileReader绑定onload事件// this.result 就是我们的读取的结果 是一个base64。
Js的FileReader读取文件内容（async/await）
ljp654的博客
04-13 5776
filereader和async/await花式使用
FileReader()读取文件、图片上传预览
油墨香^-^的博客
02-16 2272
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个htmlCanvasElement上执行mozGetAsFile()方法后返回结果。
【Flutter开发App开发笔记】
xiaoxie_45的博客
02-14 1887
Flutter BottomNavgiationBar Widget 底部导航栏 切换后状态丢失 static List<Widget> contentOptions = <Widget>[ new IndexPage(), Text( 'Index 1 场馆预定', style: optionsStyle, ), PersonCenterPage(), ]; // contentOptions 是widget List
FileReader读取文件的三种方式
热门推荐
s77的博客
02-04 5万+
#日常练习 FileReader可以通过一次读取文件中一个字符，一次读取一个字符数组或使用缓冲区这三种方式来读取文件 备注：使用缓冲区的方式的内部实现是借助数组完成 package IO; import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException; public class F

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值