HTML5 学习FileReader接口代码实例分享9（图）
1、FileReader概述
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
2、FileReader接口方法
| 方法名 | 参数 | 描述 |
| readAsBinaryString | file | 将文件读取为二进制码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| readAsArrayBuffer | file | 将文件读取为ArrayBuffer对象 |
| abort | (none) | 中断读取操作 |
3、FileReader接口事件
| 事件 | 描述 |
| onabort | 数据读取中断时触发 |
| onerror | 数据读取出错时触发 |
| onloadstart | 数据读取开始时触发 |
| onprogress | 数据读取中 |
| onload | 数据读取成功完成时触发 |
| onloadend | 数据读取完成时触发，无论成功失败 |
4、使用实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Html5Test</title>
</head>
<body>
<article>
<header></header>
<section>
<p>
<lable>请选择一个文件：</lable>
<input type="file" id="file_reader">
<input type="button" value="读取图像" onclick="readAsDataUrl();">
<input type="button" value="读取二进制数据" onclick="readAsBinaryString();">
<input type="button" value="读取文本文件" onclick="readAsText();">
</p>
<p id="file_reader_result" name="file_reader_result">
<!-- 这里用来显示读取结果 -->
</p>
<script>
var file_reader_result = document.getElementById("file_reader_result");
// 检测浏览器是否支持FileReader
if (typeof FileReader == "undefined") {
file_reader_result.innerHTML = "您的浏览器不支持FileReader";
file.setAttribute('disabled', 'disabled');
}
// 将文件以Data Url形式读入页面
function readAsDataUrl(){
// 检查是否为图像文件
var f = document.getElementById("file_reader").files[0];
if (!/image\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传图片文件！";
return false;
};
var reader = new FileReader();
// 将文件以Data Url形式读入页面
reader.readAsDataURL(f);
reader.onload = function(e){
file_reader_result.innerHTML = '<img src="' + this.result + '" alt="图片" />';
}
}
// 将文件以二进制形式读入页面
function readAsBinaryString(){
// 检查是否为图像文件
var f = document.getElementById("file_reader").files[0];
if (!/image\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传图片文件！";
return false;
};
var reader = new FileReader();
// 将文件以二进制形式读入页面
reader.readAsBinaryString(f);
reader.onload = function(e){
file_reader_result.innerHTML = this.result;
}
}
// 将文件以文本形式读入页面 目前测试仅支持txt文件
function readAsText(){
// 检查是否是文本文件
var f = document.getElementById("file_reader").files[0];
if (!/text\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传文本文件！";
return false;
};
var reader = new FileReader();
// 将文件以文本形式读入页面
reader.readAsText(f);
reader.onload = function(e){
file_reader_result.innerHTML = this.result;
}
}
</script>
</section>
</article>
</body>
</html>以上是HTML5 学习FileReader接口代码实例分享9（图）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
电脑主板内部接口都有什么 推荐电脑主板内部接口介绍
Mar 12, 2024 pm 04:34 PM
我们在电脑组装的过程中，安装过程虽然简单，不过往往都是在接线上遇到问题，经常有装机用户误将CPU散热器的供电线插到了SYS_FAN上，虽然风扇可以转动，不过在开机可能会有F1报错“CPUFanError”，同时也导致了CPU散热器无法智能调速。下面装机之家分享一下电脑主板上CPU_FAN、SYS_FAN、CHA_FAN、CPU_OPT接口知识科普。电脑主板上CPU_FAN、SYS_FAN、CHA_FAN、CPU_OPT接口知识科普1、CPU_FANCPU_FAN是CPU散热器专用接口，12V工作
Go语言中常见的编程范式和设计模式
Mar 04, 2024 pm 06:06 PM
Go语言作为一门现代化的、高效的编程语言，拥有丰富的编程范式和设计模式可以帮助开发者编写高质量、可维护的代码。本文将介绍Go语言中常见的编程范式和设计模式，并提供具体的代码示例。1.面向对象编程在Go语言中，可以使用结构体和方法实现面向对象编程。通过定义结构体和给结构体绑定方法，可以实现数据封装和行为绑定在一起的面向对象特性。packagemaini
PHP接口简介及其定义方式
Mar 23, 2024 am 09:00 AM
PHP接口简介及其定义方式PHP是一种广泛应用于Web开发的开源脚本语言，具有灵活、简单、强大等特点。在PHP中，接口（interface）是一种定义多个类之间公共方法的工具，实现了多态性，让代码更加灵活和可重用。本文将介绍PHP接口的概念及其定义方式，同时提供具体的代码示例展示其用法。1.PHP接口概念接口在面向对象编程中扮演着重要的角色，定义了类应
NotImplementedError()的处理方案
Mar 01, 2024 pm 03:10 PM
报错的原因在python中，Tornado中抛出NotImplementedError()的原因可能是因为未实现某个抽象方法或接口。这些方法或接口在父类中声明，但在子类中未实现。子类需要实现这些方法或接口才能正常工作。如何解决解决这个问题的方法是在子类中实现父类声明的抽象方法或接口。如果您正在使用一个类来继承另一个类，并且您看到了这个错误，则应该在子类中实现父类中所有声明的抽象方法。如果您正在使用一个接口，并且您看到了这个错误，则应该在实现该接口的类中实现该接口中所有声明的方法。如果您不确定哪些
Java 中接口和抽象类在设计模式中的应用
May 01, 2024 pm 06:33 PM
接口和抽象类在设计模式中用于解耦和可扩展性。接口定义方法签名，抽象类提供部分实现，子类必须实现未实现的方法。在策略模式中，接口用于定义算法，抽象类或具体类提供实现，允许动态切换算法。在观察者模式中，接口用于定义观察者行为，抽象类或具体类用于订阅和发布通知。在适配器模式中，接口用于适配现有类，抽象类或具体类可实现兼容接口，允许与原有代码交互。
透视鸿蒙系统：功能实测与使用感受
Mar 23, 2024 am 10:45 AM
鸿蒙系统作为华为推出的全新操作系统，在行业内引起了不小的轰动。作为华为在美国禁令之后的一次全新尝试，鸿蒙系统被寄予了厚望和期待。近日，我有幸得到了一部搭载鸿蒙系统的华为手机，经过一段时间的使用和实测，我将分享一些关于鸿蒙系统的功能实测和使用感受。首先，让我们来看一下鸿蒙系统的界面和功能。鸿蒙系统整体采用了华为自家的设计风格，简洁清晰，操作流畅。在桌面上，各种
Java 中接口和抽象类的内部类实现
Apr 30, 2024 pm 02:03 PM
Java允许在接口和抽象类中定义内部类，为代码重用和模块化提供灵活性。接口中的内部类可实现特定功能，而抽象类中的内部类可定义通用功能，子类提供具体实现。
Java 接口与抽象类：通往编程天堂之路
Mar 04, 2024 am 09:13 AM
接口：无实现的契约接口在Java中定义了一组方法签名，但不提供任何具体实现。它充当一种契约，强制实现该接口的类实现其指定的方法。接口中的方法是抽象方法，没有方法体。代码示例：publicinterfaceAnimal{voideat();voidsleep();}抽象类：部分实现的蓝图抽象类是一种父类，它提供了一个部分实现，可以被它的子类继承。与接口不同，抽象类可以包含具体的实现和抽象方法。抽象方法是用abstract关键字声明的，并且必须被子类覆盖。代码示例：publicabstractcla
