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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
jQuery原生的动画效果
Jul 10 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
php实现对象克隆的方法
2015/06/20 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
python列表的常用操作方法小结
2016/05/21 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
django加载本地html的方法
2018/05/27 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python Merge函数原理及用法解析
2020/09/16 Python
python tkinter实现连连看游戏
2020/11/16 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
家具促销活动方案
2014/02/16 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
会议邀请函
2015/01/30 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书