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 相关文章推荐
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
详解react组件通讯方式(多种)
May 06 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
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
layui实现三级联动效果
2019/07/26 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
老师推荐信
2013/10/28 职场文书
师范应届生求职信
2013/11/15 职场文书
酒店副总岗位职责
2013/12/24 职场文书
黄河的主人教学反思
2014/02/07 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
党员剖析材料范文
2014/09/30 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang