HTML5 learning FileReader interface code example sharing 9 (picture)
1, FileReader Overview
FileReader object allows web applications to asynchronously read files (or raw data buffers) stored on the user's computer. Content, use File or Blob objects to specify the file or data to be read.
The File object can be a FileList object returned after the user selects a file on an <input> element, or it can be generated by a drag-and-drop operation. The DataTransfer object can also be the result returned after executing the mozGetAsFile() method on a HTMLCanvasElement.
2. FileReader interface method
| Event | Description |
| Data read interruption Triggered when | |
| Triggered when data reading error | |
| Triggered when data reading starts | |
| Data reading | |
| Triggered when data reading is successfully completed | |
| Triggered when data reading is completed, regardless of success or failure |
4. Use examples
<!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>The above is the detailed content of HTML5 learning FileReader interface code example sharing 9 (picture). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1392
52
36
110
What are the internal interfaces of a computer motherboard? Recommended introduction to the internal interfaces of a computer motherboard
Mar 12, 2024 pm 04:34 PM
When we assemble the computer, although the installation process is simple, we often encounter problems in the wiring. Often, users mistakenly plug the power supply line of the CPU radiator into the SYS_FAN. Although the fan can rotate, it may not work when the computer is turned on. There will be an F1 error "CPUFanError", which also causes the CPU cooler to be unable to adjust the speed intelligently. Let's share the common knowledge about the CPU_FAN, SYS_FAN, CHA_FAN, and CPU_OPT interfaces on the computer motherboard. Popular science on the CPU_FAN, SYS_FAN, CHA_FAN, and CPU_OPT interfaces on the computer motherboard 1. CPU_FANCPU_FAN is a dedicated interface for the CPU radiator and works at 12V
Common programming paradigms and design patterns in Go language
Mar 04, 2024 pm 06:06 PM
As a modern and efficient programming language, Go language has rich programming paradigms and design patterns that can help developers write high-quality, maintainable code. This article will introduce common programming paradigms and design patterns in the Go language and provide specific code examples. 1. Object-oriented programming In the Go language, you can use structures and methods to implement object-oriented programming. By defining a structure and binding methods to the structure, the object-oriented features of data encapsulation and behavior binding can be achieved. packagemaini
Introduction to PHP interfaces and how to define them
Mar 23, 2024 am 09:00 AM
Introduction to PHP interface and how it is defined. PHP is an open source scripting language widely used in Web development. It is flexible, simple, and powerful. In PHP, an interface is a tool that defines common methods between multiple classes, achieving polymorphism and making code more flexible and reusable. This article will introduce the concept of PHP interfaces and how to define them, and provide specific code examples to demonstrate their usage. 1. PHP interface concept Interface plays an important role in object-oriented programming, defining the class application
Solution to NotImplementedError()
Mar 01, 2024 pm 03:10 PM
The reason for the error is in python. The reason why NotImplementedError() is thrown in Tornado may be because an abstract method or interface is not implemented. These methods or interfaces are declared in the parent class but not implemented in the child class. Subclasses need to implement these methods or interfaces to work properly. How to solve this problem is to implement the abstract method or interface declared by the parent class in the child class. If you are using a class to inherit from another class and you see this error, you should implement all the abstract methods declared in the parent class in the child class. If you are using an interface and you see this error, you should implement all methods declared in the interface in the class that implements the interface. If you are not sure which
Application of interfaces and abstract classes in design patterns in Java
May 01, 2024 pm 06:33 PM
Interfaces and abstract classes are used in design patterns for decoupling and extensibility. Interfaces define method signatures, abstract classes provide partial implementation, and subclasses must implement unimplemented methods. In the strategy pattern, the interface is used to define the algorithm, and the abstract class or concrete class provides the implementation, allowing dynamic switching of algorithms. In the observer pattern, interfaces are used to define observer behavior, and abstract or concrete classes are used to subscribe and publish notifications. In the adapter pattern, interfaces are used to adapt existing classes. Abstract classes or concrete classes can implement compatible interfaces, allowing interaction with original code.
Insight into Hongmeng system: actual function measurement and usage experience
Mar 23, 2024 am 10:45 AM
As a new operating system launched by Huawei, Hongmeng system has caused quite a stir in the industry. As a new attempt by Huawei after the US ban, Hongmeng system has high hopes and expectations. Recently, I was fortunate enough to get a Huawei mobile phone equipped with Hongmeng system. After a period of use and actual testing, I will share some functional testing and usage experience of Hongmeng system. First, let’s take a look at the interface and functions of Hongmeng system. The Hongmeng system adopts Huawei's own design style as a whole, which is simple, clear and smooth in operation. On the desktop, various
Inner class implementation of interfaces and abstract classes in Java
Apr 30, 2024 pm 02:03 PM
Java allows inner classes to be defined within interfaces and abstract classes, providing flexibility for code reuse and modularization. Inner classes in interfaces can implement specific functions, while inner classes in abstract classes can define general functions, and subclasses provide concrete implementations.
Java Interfaces and Abstract Classes: The Road to Programming Heaven
Mar 04, 2024 am 09:13 AM
Interface: An implementationless contract interface defines a set of method signatures in Java but does not provide any concrete implementation. It acts as a contract that forces classes that implement the interface to implement its specified methods. The methods in the interface are abstract methods and have no method body. Code example: publicinterfaceAnimal{voideat();voidsleep();} Abstract class: Partially implemented blueprint An abstract class is a parent class that provides a partial implementation that can be inherited by its subclasses. Unlike interfaces, abstract classes can contain concrete implementations and abstract methods. Abstract methods are declared with the abstract keyword and must be overridden by subclasses. Code example: publicabstractcla
