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 相关文章推荐
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
node.js中watch机制详解
Nov 17 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
vue 实现上传组件
May 31 Vue.js
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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
python概率计算器实例分析
2015/03/25 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
Python 硬币兑换问题
2019/07/29 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
经销商培训邀请函
2014/01/21 职场文书
房产委托公证书样本
2014/04/04 职场文书
高校教师个人总结
2015/02/10 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
python 中yaml文件用法大全
2021/07/04 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
python实现商品进销存管理系统
2022/05/30 Python