js实现前端图片上传即时预览功能


Posted in Javascript onAugust 02, 2017

现在,在实现前端图片即时预览,可以说是一件很简单的事情了。

我们只需要用file对象和FileReader对象,既可以轻松实现,无需下载类库。

HTML代码

<!DOCTYPE html>
<html>
<body>
<img src="">
<form>
 <input type="file" name="image" />
</form>
</body>
</html>

先来说说input,input这个元素,具有一个files属性,该属性是一个filelist对象,是file对象的集合。

你可以通过input.files[0]的语法形式拿到这个file对象,不过遗憾的是,这个对象仅仅包含了用户选择的文件的相关信息,如文件名,大小,类型,最后修改时间等,并不直接提供文件的数据。

程序员只能通过这些信息对用户选择的文件进行一些限制。

所以,我们要使用另一个对象FileReader来读取到用户选择的文件的数据

我们初始化一个FileReader对象

var x=new FileReader;

这是一个初始化完成的FileReader对象具有的一些属性和支持的事件

js实现前端图片上传即时预览功能

类似于Ajax,FileReader提供了readyState来查看读取的状态,不过并没有什么卵用

因为FileReader还提供了onloadend这样的事件,来处理数据读取完成后该干些什么,onprogress是最有趣的,只要在读取数据,那么这个事件会被不停的触发,可以实现那种进度条效果。

还有一个极其重要的属性result,初始化完成时,该值是null,当读取数据后,该值就是所获得的数据。

接下来,我们就可以使用这个对象读取用户选择的图片了,没有错就是这么简单

当用户选择了某一个文件时,就会在input上触发change事件,这意味着我们可以开始读取数据了

document.forms[0].elements[0].onchange=function(){
  x.readAsDataURL(this.files[0]);
 }

readASDateURL这个方法,可以读取一个file对象,并把数据以base64的格式填充到FileReader对象中的result属性中去。

当数据读取完毕,就会触发onloadend事件,在这个事件中,就可以把数据填到img标签中去

x.onloadend=function(){
  document.images[0].src=this.result;
 }

 完整版代码

<!DOCTYPE html>
<html>
<body>
<img src="">
<form>
 <input type="file" name="image" />
</form>
<script type="text/javascript">
 var x=new FileReader;
 document.forms[0].elements[0].onchange=function(){
  x.readAsDataURL(this.files[0]);
 }
 x.onloadend=function(){
  document.images[0].src=this.result;
 }
</script>
</body>
</html>

当然,这里只是一个小小的Demo,仅仅实现了本地预览,抛砖引玉,你还可以在此基础上轻松实现对上传文件的一些判断和限制,或者是UI上的提升。

FileReader的能力并不止步于此,不仅仅有readASDataURL这种方法。 

js实现前端图片上传即时预览功能

不仅是图片,音乐,视频都可以实现对于的本地预览,只要把result属性的值,赋值给对应的audio或video标签的src属性即可,不过因为内存限制,读取视频往往失败。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
js获取height和width的方法说明
Jan 06 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 #Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 #Javascript
原生js获取left值和top值的三种方法
Aug 02 #Javascript
认识less和webstrom的less配置方法
Aug 02 #Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解基于node的前端项目编译时内存溢出问题
Aug 01 #Javascript
javascript 中select框触发事件过程的分析
Aug 01 #Javascript
You might like
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
js读写json文件实例代码
2014/10/21 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
js实现旋转木马效果
2017/03/17 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
python 接口返回的json字符串实例
2018/03/27 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python中doctest库实例用法
2020/12/31 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
求职简历的自我评价
2014/01/31 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
电工技术比武方案
2014/05/11 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
单位同意报考证明
2015/06/17 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
浅谈Web Storage API的使用
2021/06/23 Javascript
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技