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 编程引入命名空间的方法
Jun 29 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
ecshop实现smtp发送邮件
2015/02/03 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
flexigrid 参数说明
2010/11/23 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
关于python多重赋值的小问题
2019/04/17 Python
python中wx模块的具体使用方法
2020/05/15 Python
python定义类的简单用法
2020/07/24 Python
软件测试企业面试试卷
2016/07/13 面试题
办公自动化毕业生求职信
2014/03/09 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
企业口号大全
2014/06/12 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2015年资料员工作总结
2015/04/25 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫