博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用FileReader实现前端图片预览
阅读量:4991 次
发布时间:2019-06-12

本文共 620 字,大约阅读时间需要 2 分钟。

  在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。
  这种方法的缺点是:必须要先把图片上传到服务器。那么问题来了,如果上传的图片很大,而网速又很慢,这就需要等待很久预览图片才会显示出来了,而且,如果用户预览图片后发现不太满意,想重新选择一张图片,这时候还要把已经上传到服务器上的图片给删除掉。
  自从有了HTML5的FileReader对象以后,预览图片变得简单多了,不再需要后台的配合,并且JS操作本地文件已经成为了可能。这种方法的思路是:通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码,然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的,可以看一下这里:
  下面是使用FileReader进行图片预览的简单demo:
1  2  3  4   
5 Document 6 7 8
9 Image preview area...10 24 25

  关于图片预览的就写到这里啦,如果哪些地方写得不对或者问题的,亲们可以在评论提出~

  今天是大年初九,也是上班的第一天,新的一年,新的开始,新的期待。祝愿亲们2017身体健康、代码无bug!

转载于:https://www.cnblogs.com/yugege/p/6367833.html

你可能感兴趣的文章
iOS - Push 通知推送
查看>>
[FJOI2007]轮状病毒
查看>>
Azure AADSTS7000215 其中一种问题的解决
查看>>
关于吃苦
查看>>
uva 1629切蛋糕(dp)
查看>>
生成awr报告
查看>>
cocos2d-x 3.0rc2 对于每个包执行情况的重要平台 (超级方便)
查看>>
Android 深入解析光传感器(二)
查看>>
Ansible@一个高效的配置管理工具--Ansible configure management--翻译(八)
查看>>
【bzoj4552/Tjoi2016&Heoi2016】排序——二分+线段树/平衡树+线段树分裂与合并
查看>>
Windows Internals学习笔记(八)IO系统
查看>>
sql插件,SQLPrompt
查看>>
Objetive-C 属性和线程安全
查看>>
mybatis pagehelper实现分页
查看>>
很牛的javascript日期转换函数
查看>>
javascript格式化json显示
查看>>
Redis 在 SNS 类应用中的最佳实践有哪些?
查看>>
关于Unity 动画绘制原理
查看>>
django-xadmin后台开发
查看>>
Canvas链式操作
查看>>