JavaScript使用FileReader实现图片上传预览效果


Posted in Javascript onMarch 27, 2020

FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest,区别只是它读取的是文件系统,而不是远程服务器。为了读取文件中的数据,FileReader提供了如下几个方法。

  • readAsText(file,encoding):以纯文本的方式读取文件,将读取到的文件保存到result属性中。
  • readAsDataURL(file):读取文件并将文件以数据URI的形式保存在result属性中。
  • readAsBinaryString(file):读取文件并将一个字符串保存在result属性中,字符串中的每个字符表示一个字节。
  • readAsArrayBuffer(file):读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
  • multiple 属性表示支持多张图片
<div id="wrapper">  
 <input id="fileUpload" type="file" multiple /><br />
 <div id="image-holder"> </div>
</div>
$("#fileUpload").on('change', function () {
 
 //获取上传文件的数量
 var countFiles = $(this)[0].files.length;
 
 var imgPath = $(this)[0].value;
 var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
 var image_holder = $("#image-holder");
 image_holder.empty();
 
 if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
  if (typeof (FileReader) != "undefined") {
 
   // 循环所有要上传的图片
   for (var i = 0; i < countFiles; i++) {
 
    var reader = new FileReader();
    reader.onload = function (e) {
     $("<img />", {
      "src": e.target.result,
       "class": "thumb-image"
     }).appendTo(image_holder);
    }
 
    image_holder.show();
    reader.readAsDataURL($(this)[0].files[i]);
   }
 
  } else {
   alert("你的浏览器不支持FileReader!");
  }
 } else {
  alert("请选择图像文件。");
 }
});

FileReader 可以支持 Internet Explorer 10+、FireFox,、Chrome 和Opera浏览器。

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

Javascript 相关文章推荐
国外的为初学者写的JavaScript教程
Jun 09 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 #Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 #Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 #Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 #Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 #Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 #Javascript
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
You might like
php查看当前Session的ID实例
2015/03/16 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python模块的加载讲解
2019/01/15 Python
python多线程下信号处理程序示例
2019/05/31 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
12月红领巾广播稿
2014/02/13 职场文书
四下基层实施方案
2014/03/28 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
师德师风学习材料
2014/12/19 职场文书
会计岗位职责范本
2015/04/02 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers