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 相关文章推荐
JS 统计时间
Mar 09 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
js中Object.create实例用法详解
Oct 05 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
php array_filter除去数组中的空字符元素
2020/06/21 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
prototype class详解
2006/09/07 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python字典一键多值实例代码分享
2019/06/14 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python简易版图书管理系统
2019/08/12 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
回门宴父母答谢词
2014/01/26 职场文书
电力安全事故反思
2014/04/27 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
教师岗位职责
2015/02/03 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
详解python的内存分配机制
2021/05/10 Python
Pandas加速代码之避免使用for循环
2021/05/30 Python
利用Apache Common将java对象池化的问题
2022/06/16 Servers