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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
常规表格多表头查询示例
Feb 21 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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
漂亮但不安全的CTB
2006/10/09 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
Prototype Selector对象学习
2009/07/23 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python 文件处理注意事项总结
2017/04/10 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
先进员工事迹材料
2014/12/20 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技