interface Web
Tutoriel H5
Exemple de code d'interface d'apprentissage HTML5 FileReader, partage 9 (image)
Exemple de code d'interface d'apprentissage HTML5 FileReader, partage 9 (image)
1. L'objet FileReader
FileReader permet aux applications Web de lire de manière asynchrone des fichiers (ou des tampons de données brutes) stockés sur l'ordinateur de l'utilisateur, du contenu. Objets File ou Blob pour spécifier le fichier ou les données à lire.
L'objet File peut être un objet 个<input> renvoyé après que l'utilisateur a sélectionné un fichier sur un élément FileList, un objet DataTransfer généré par une opération de glisser-déposer ou un HTMLCanvasElement objet généré par un élément mozGetAsFile()方法后返回结果 Exécuter
| 方法名 | 参数 | 描述 |
| readAsBinaryString | file | 将文件读取为二进制码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| readAsArrayBuffer | file | 将文件读取为ArrayBuffer对象 |
| abort | (none) | 中断读取操作 |
Nom de la méthode |
Paramètres |
|
| readAsBinaryString | fichier | Lire le fichier sous forme de code binaire |
| readAsText | fichier,[encodage] | Lire le fichier sous forme de texte |
| readAsDataURL | file | Lire le fichier en tant que DataURL |
| readAsArrayBuffer | fichier | Lire le fichier en tant qu'objet ArrayBuffer |
| abandonner | (aucun) | Interrompre l'opération de lecture | tr>
| 事件 | 描述 |
| onabort | 数据读取中断时触发 |
| onerror | 数据读取出错时触发 |
| onloadstart | 数据读取开始时触发 |
| onprogress | 数据读取中 |
| onload | 数据读取成功完成时触发 |
| onloadend | 数据读取完成时触发，无论成功失败 |
3 , interface FileReader
événementÉvénement |
Description |
| onabort | Déclenché lorsque la lecture des données est interrompue |
| erreur | Déclenché lorsqu'une erreur de lecture des données se produit |
| onloadstart | Déclenché lorsque la lecture des données commence |
| en cours | Lecture des données |
| onload | Déclenché lorsque la lecture des données est terminée avec succès |
| onloadend | Déclenché lorsque la lecture des données est terminée, quel que soit le succès ou l'échec |
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quelles sont les interfaces internes d'une carte mère d'ordinateur ? Introduction recommandée aux interfaces internes d'une carte mère d'ordinateur ?
Mar 12, 2024 pm 04:34 PM
Lorsque nous assemblons l'ordinateur, bien que le processus d'installation soit simple, nous rencontrons souvent des problèmes de câblage. Souvent, les utilisateurs branchent par erreur la ligne d'alimentation du radiateur du processeur au SYS_FAN. Bien que le ventilateur puisse tourner, il peut ne pas fonctionner lorsque le ventilateur fonctionne. L'ordinateur est allumé. Il y aura une erreur F1 "CPUFanError", qui empêchera également le refroidisseur du processeur d'ajuster intelligemment la vitesse. Partageons les connaissances communes sur les interfaces CPU_FAN, SYS_FAN, CHA_FAN et CPU_OPT sur la carte mère de l'ordinateur. Science populaire sur les interfaces CPU_FAN, SYS_FAN, CHA_FAN et CPU_OPT sur la carte mère de l'ordinateur 1. CPU_FANCPU_FAN est une interface dédiée pour le radiateur du processeur et fonctionne à 12 V.
Paradigmes de programmation et modèles de conception courants en langage Go
Mar 04, 2024 pm 06:06 PM
En tant que langage de programmation moderne et efficace, le langage Go possède de riches paradigmes de programmation et des modèles de conception qui peuvent aider les développeurs à écrire du code maintenable de haute qualité. Cet article présentera les paradigmes de programmation et les modèles de conception courants dans le langage Go et fournira des exemples de code spécifiques. 1. Programmation orientée objet Dans le langage Go, vous pouvez utiliser des structures et des méthodes pour implémenter une programmation orientée objet. En définissant une structure et des méthodes de liaison à la structure, les fonctionnalités orientées objet d'encapsulation de données et de liaison de comportement peuvent être obtenues. packagemaini
Introduction aux interfaces PHP et comment les définir
Mar 23, 2024 am 09:00 AM
Introduction à l'interface PHP et à sa définition. PHP est un langage de script open source largement utilisé dans le développement Web. Il est flexible, simple et puissant. En PHP, une interface est un outil qui définit des méthodes communes entre plusieurs classes, réalisant le polymorphisme et rendant le code plus flexible et réutilisable. Cet article présentera le concept des interfaces PHP et comment les définir, et fournira des exemples de code spécifiques pour démontrer leur utilisation. 1. Concept d'interface PHP L'interface joue un rôle important dans la programmation orientée objet, définissant l'application de classe
Solution à NotImplementedError()
Mar 01, 2024 pm 03:10 PM
La raison de l'erreur est en python. La raison pour laquelle NotImplementedError() est lancée dans Tornado peut être due au fait qu'une méthode ou une interface abstraite n'est pas implémentée. Ces méthodes ou interfaces sont déclarées dans la classe parent mais non implémentées dans la classe enfant. Les sous-classes doivent implémenter ces méthodes ou interfaces pour fonctionner correctement. Comment résoudre ce problème consiste à implémenter la méthode abstraite ou l'interface déclarée par la classe parent dans la classe enfant. Si vous utilisez une classe pour hériter d'une autre classe et que vous voyez cette erreur, vous devez implémenter toutes les méthodes abstraites déclarées dans la classe parent dans la classe enfant. Si vous utilisez une interface et que vous voyez cette erreur, vous devez implémenter toutes les méthodes déclarées dans l'interface dans la classe qui implémente l'interface. Si vous n'êtes pas sûr de savoir lequel
Application d'interfaces et de classes abstraites dans les modèles de conception en Java
May 01, 2024 pm 06:33 PM
Les interfaces et les classes abstraites sont utilisées dans les modèles de conception pour le découplage et l'extensibilité. Les interfaces définissent les signatures des méthodes, les classes abstraites fournissent une implémentation partielle et les sous-classes doivent implémenter des méthodes non implémentées. Dans le modèle de stratégie, l'interface est utilisée pour définir l'algorithme, et la classe abstraite ou la classe concrète assure l'implémentation, permettant une commutation dynamique des algorithmes. Dans le modèle d'observateur, les interfaces sont utilisées pour définir le comportement de l'observateur, et les classes abstraites ou concrètes sont utilisées pour s'abonner et publier des notifications. Dans le modèle d'adaptateur, les interfaces sont utilisées pour adapter les classes existantes ou les classes concrètes peuvent implémenter des interfaces compatibles, permettant une interaction avec le code d'origine.
Aperçu du système Hongmeng : mesure réelle des fonctions et expérience d'utilisation
Mar 23, 2024 am 10:45 AM
En tant que nouveau système d'exploitation lancé par Huawei, le système Hongmeng a fait sensation dans l'industrie. En tant que nouvelle tentative de Huawei après l'interdiction américaine, le système Hongmeng suscite de grands espoirs et attentes. Récemment, j'ai eu la chance d'acquérir un téléphone mobile Huawei équipé du système Hongmeng. Après une période d'utilisation et de tests réels, je partagerai quelques tests fonctionnels et une expérience d'utilisation du système Hongmeng. Tout d’abord, jetons un coup d’œil à l’interface et aux fonctions du système Hongmeng. Le système Hongmeng adopte le style de conception propre à Huawei dans son ensemble, qui est simple, clair et fluide. Sur le bureau, divers
Implémentation de classe interne d'interfaces et de classes abstraites en Java
Apr 30, 2024 pm 02:03 PM
Java permet de définir des classes internes au sein d'interfaces et de classes abstraites, offrant ainsi une flexibilité pour la réutilisation et la modularisation du code. Les classes internes des interfaces peuvent implémenter des fonctions spécifiques, tandis que les classes internes des classes abstraites peuvent définir des fonctions générales et les sous-classes fournissent des implémentations concrètes.
Interfaces Java et classes abstraites : la route vers le paradis de la programmation
Mar 04, 2024 am 09:13 AM
Interface : une interface de contrat sans implémentation définit un ensemble de signatures de méthodes en Java mais ne fournit aucune implémentation concrète. Il agit comme un contrat qui oblige les classes qui implémentent l'interface à implémenter ses méthodes spécifiées. Les méthodes de l'interface sont des méthodes abstraites et n'ont pas de corps de méthode. Exemple de code : publicinterfaceAnimal{voideat();voidsleep();} Classe abstraite : plan partiellement implémenté Une classe abstraite est une classe parent qui fournit une implémentation partielle dont ses sous-classes peuvent hériter. Contrairement aux interfaces, les classes abstraites peuvent contenir des implémentations concrètes et des méthodes abstraites. Les méthodes abstraites sont déclarées avec le mot-clé abstract et doivent être remplacées par des sous-classes. Exemple de code : publicabstractcla
