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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
详解JS函数防抖
Jun 05 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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适配器模式(Adapter)
2014/11/25 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
Textarea根据内容自适应高度
2013/10/28 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[03:48]大碗DOTA
2019/07/25 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python批量下载图片的三种方法
2013/04/22 Python
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
快速了解Python开发环境Spyder
2020/06/29 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
乔迁宴答谢词
2014/01/21 职场文书
求职信需要的五点内容
2014/02/01 职场文书
结婚周年感言
2014/02/24 职场文书
投标担保书范文
2014/04/02 职场文书
商务经理岗位职责
2014/08/03 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
初中生物教学随笔
2015/08/15 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
关于vue-router-link选择样式设置
2022/04/30 Vue.js