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的朋友一点学习经验小结
Nov 23 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
悬浮数字的实现案例
Feb 19 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
WebPack基础知识详解
2017/01/16 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
详解python中的线程与线程池
2019/05/10 Python
django中使用POST方法获取POST数据
2019/08/20 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
python 如何调用 dubbo 接口
2020/09/24 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
中学运动会广播稿
2014/01/19 职场文书
毕业大学生自荐信
2014/06/17 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
党校个人总结
2015/03/04 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python