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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
原生javascript获取元素样式
Dec 31 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
JavaScript隐式类型转换代码实例
May 29 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_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP扩展开发入门教程
2015/02/26 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
js实现聊天对话框
2020/02/08 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
在Django中创建动态视图的教程
2015/07/15 Python
python 实现屏幕录制示例
2019/12/23 Python
Python对象的属性访问过程详解
2020/03/05 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
极简的HTML5模版
2015/07/09 HTML / CSS
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
如何开启linux的ssh服务
2015/02/14 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
给老师的一封建议书
2014/03/13 职场文书
安踏广告词改编版
2014/03/21 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
幼儿园辞职书
2015/02/26 职场文书
红歌会主持词
2015/07/02 职场文书
被委托人身份证明
2015/08/07 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS