html5-FileReader实现上传图片实时预览

发布时间:2019-01-10 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html5-FileReader实现上传图片实时预览脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

普通的文件上传只能看到它的文件名,而如果要实现选择某一张图片则可以利用html5的FileReader完成

下面是实现步骤:

html:

这里是上传图片的内容,onchange="getFile()"为选择文件后的转换函数,后面会提及

上传图片的按钮我这里是自定义的,做法在另一篇博客里

css:

预览框我暂定为100x100的正方形框,出来后图片可能会有变形之类的,可以自定义

接下来是主要的JS部分

JS:

首先,定义一个变量showFile保存实际要显示的图片的整个文件

获取预览框,方便之后的显示:

准备工作做完了,现在开始转码

编写一个函数,将图片路径转码

这样就获取到了转码后的图片文件的src

(注意:FileReader在IE里是不兼容的,IE 6-9完全不兼容,IE 10-11需要写兼容)

接下来就是转换啦

这里将选择的文件获取到之后,再赋给全局文件(如果点开了选择框但是没有选择文件即为之前的文件本身),再回调函数里将src赋给预览框

这一步的完成时间是在file框的onchange中完成的

然后效果就完成啦,看看成果吧

选择之前:

因为我没有给img赋src,所以为空白

选择之后:

选择图片就可以预览啦,再选择图片一样可以预览

样式简洁,可以自己定义,比如写个+什么的

像这种:

样式就自己定义好了。

总结

以上是脚本之家为你收集整理的html5-FileReader实现上传图片实时预览全部内容,希望文章能够帮你解决html5-FileReader实现上传图片实时预览所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: