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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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
一个多文件上传的例子(原创)
2006/10/09 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python 序列的方法总结
2016/10/18 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
实例讲解python中的协程
2018/10/08 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
python推导式的使用方法实例
2021/02/28 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
中科软笔试题和面试题
2014/10/07 面试题
大门门卫岗位职责
2013/11/30 职场文书
企业总经理岗位职责
2014/02/13 职场文书
师范生自荐信模板
2014/05/28 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
人事任命书范本
2015/09/21 职场文书
销售口号霸气押韵
2015/12/24 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Vue Element plus使用方法梳理
2022/12/24 Vue.js