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修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Element Notification通知的实现示例
Jul 27 Javascript
jquery插件实现搜索历史
Apr 24 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
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
python中的全局变量用法分析
2015/06/09 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
python清空命令行方式
2020/01/13 Python
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
运动会致辞稿50字
2014/02/04 职场文书
大学生暑期实践感言
2014/02/26 职场文书
婚礼主持结束词
2014/03/13 职场文书
服务质量承诺书
2014/03/27 职场文书
党日活动总结
2014/05/07 职场文书
安全标语口号
2014/06/09 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记
Python Flask实现进度条
2022/05/11 Python