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制作loading动画效果 loading效果
Jan 14 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
全面解析Vue中的$nextTick
Dec 24 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 年龄计算函数(精确到天)
2012/06/07 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
ExpressJS入门实例
2015/01/14 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
JavaScript实现通讯录功能
2020/12/27 Javascript
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
python协程之动态添加任务的方法
2019/02/19 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Django的CVB实例详解
2020/02/10 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
小学生新学期寄语
2014/01/19 职场文书
股权投资意向书
2014/04/01 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
秋天的图画教学反思
2014/05/01 职场文书
小学一年级数学教学计划
2015/01/20 职场文书