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游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
js实现分割上传大文件
Mar 09 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
vue打包时去掉所有的console.log
Apr 10 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
php 在线打包_支持子目录
2008/06/28 PHP
PHP伪造referer实例代码
2008/09/20 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python书单 不将就
2017/07/11 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
Python作用域与名字空间原理详解
2020/03/21 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
详解python算法常用技巧与内置库
2020/10/17 Python
英国航空官网:British Airways
2016/09/11 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
毕业生自我推荐
2013/11/04 职场文书
学习保证书范文
2014/04/30 职场文书
社区党员公开承诺书
2014/08/30 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers