JS+HTML5 FileReader实现文件上传前本地预览功能


Posted in Javascript onMarch 27, 2020

HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:

1.检测浏览器对FileReader的支持

if(window.FileReader) { 
 var fr = new FileReader(); 
 // add your code here 
} 
else { 
 alert("Not supported by your browser!"); 
}

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。

eadAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。

readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。

<script type="text/javascript"> 
 function showPreview(source) { 
  var file = source.files[0]; 
  if(window.FileReader) { 
  var fr = new FileReader(); 
  fr.onloadend = function(e) { 
   document.getElementById("portrait").src = e.target.result; 
  }; 
  fr.readAsDataURL(file); 
  } 
 } 
 </script>
<input type="file" name="file" onchange="showPreview(this)" /> 
<img id="portrait" src="" width="70" height="75">
if(!/image\/\w+/.test(file.type)){ 
 alert("请确保文件为图像类型"); 
 return false; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 #Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
通过命令行生成vue项目框架的方法
Jul 12 #Javascript
微信小程序实现点击返回顶层的方法
Jul 12 #Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 #Javascript
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
JavaScript严格模式下关于this的几种指向详解
Jul 12 #Javascript
You might like
php无限极分类递归排序实现方法
2014/11/11 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
js实现全选和全不选
2020/07/28 Javascript
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python按钮的响应事件详解
2019/03/04 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
印度网上药店:1mg
2017/10/13 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
村道德模范事迹材料
2014/08/28 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
歼十出击观后感
2015/06/11 职场文书
暂住证明怎么写
2015/06/19 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
为Java项目添加Redis缓存的方法
2021/05/18 Redis