HTML上传图片并实时更新显示

页面效果图

原理

获取文件数据

将文件上传后，文件会缓存在浏览器中并生成了对应的file对象，这时我们就可以通过file对象获得文件数据。

//获取上传文件的信息
var upfile = document.getElementById('pic').files[0];

生成文件URL

生成file对象的URL（查看浏览器中的网络包可以知道有一部分是uuid）

//生成文件url
var sr = window.URL.createObjectURL(upfile);

图片实时显示

图片的显示就是把img标签取出来并给src属性赋值为file对象的url就可以了。

var goodsimg = document.getElementById('goodsImg');
goodsimg.src = 文件url;

如何做到实时显示呢？

这个时候就需要有一个监听文件上传的函数了，刚好input标签有个onchange属性。

type="file" 为上传文件。

οnchange="showImg()"，当文件上传后会触发showImg()函数。

<input type="file" name="pic" id="pic" onchange="showImg()" accept="image/gif, image/jpeg">

综上，当图片上传就会触发showImg函数，然后在函数中获得file对象，生成file对象的URL，修改img标签属性为file对象的URL，我们上传的图片就实时更新显示出来了。

HTML上传图片并实时更新显示相关推荐

ajax上传图片成功但不显示,jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)...
参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...
抖音IP属地是实时更新的吗？能不显示吗？
抖音近期出现了一个新的功能引发了网友的热议,那就是显示IP属地,抖友对这个功能有不少疑问,下面就给大家分享抖音ip属地是实时更新的吗的相关答疑. 一.抖音ip属地是实时更新的吗抖音的ip地址是是实时 ...
QChartView显示实时更新的温度曲线图，即动态曲线图。
前言:因为有个项目要实现将热像仪传过来的温度图像实时的显示在图表中,所以用到QChartView来显示,网上没有找到这种实时更新温度数据曲线的方法,于是自己琢磨了一下,实现了显示动态的温度曲线. 一. ...
go监听mysql事件更新,有没有一种方法可以“监听”数据库事件并实时更新页面？...
我正在寻找一种创建简单的HTML表的方法,该表可以在数据库更改事件发生时进行实时更新.特别是添加了新记录. 换句话说,将其视为执行人员仪表板.如果进行了销售并且在数据库中添加了新行(在本例中为MySQ ...
使用php+swoole对client数据实时更新
2019独角兽企业重金招聘Python工程师标准>>> 上一篇提到了swoole的基本使用,现在通过几行基本的语句来实现比较复杂的逻辑操作: 先说一下业务场景.我们目前的大多数应用都 ...
如何实现DataGridView实时更新数据【Z】
原帖:http://bbs.bccn.net/thread-341646-1-1.html 最近一直在研究调度涉及到用调度实时给客户发送短信的功能其中就有用到实时更新的显示发送状态的当然今天不 ...
qchart 图表_QChart双Y轴实时更新曲线图
QChart双Y轴,X轴设置时间轴前言工作上需要做一个双Y轴的折线图,除了看QT的相关类的文档,找到的资料不多,所以记录下来. 准备首先,通过QT的帮助文档了解下QChart.QSplineSe ...
echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图
有时候我们的图表需要根据后台数据每秒实时更新,那么用echarts应该如何实现呢?2020.11.27发现篇文章很多人关注,但之前写的不是很清楚,今天更新下,大家有问题可以也留言讨论.这是一个仿win ...
ios pusher使用_如何使用JavaScript和Pusher实时更新用户状态
ios pusher使用 by Rahat Khanna 通过拉哈特·汉娜如何使用JavaScript和Pusher实时更新用户状态 (How to update a User's Status i ...