Maison > Article > interface Web > Introduction détaillée à l'interface HTML5 FileReader

Introduction détaillée à l'interface HTML5 FileReader

黄舟original: 2017-04-13 10:31:021505parcourir

1. Présentation de FileReader L'objet

FileReader permet aux applications Web de lire de manière asynchrone le contenu des fichiers (ou des tampons de données brutes) stockés sur l'ordinateur de l'utilisateur, à l'aide de File ou Blob L'objet précise le fichier ou les données à lire.

L'objet File peut être un objet 个d5fd7aea971a85678ba271703566ebfd 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

sur 🎜>.

2. Méthode d'interface FileReader

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
readAsArrayBuffer	file	将文件读取为`ArrayBuffer对象`
abort	(none)	中断读取操作

Description

fichier,[encodage]

Nom de la méthode	Paramètres
readAsBinaryString	fichier	Lire le fichier sous forme de code binaire
readAsText	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)	Interruption opération de lecture

事件	描述
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'il y a une erreur dans la lecture des données span>
onloadstart	Déclenché lorsque la lecture des données démarre
onprogress	Chargement 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(&#39;disabled&#39;, &#39;disabled&#39;);
            }
            // 将文件以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 = &#39;<img src="&#39; + this.result + &#39;" alt="图片" />&#39;;
                }
            }
            // 将文件以二进制形式读入页面
            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>

4. Exemples d'utilisation

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelle est l’efficacité du site Web réactif H5 ?Article suivant：Quelle est l’efficacité du site Web réactif H5 ?

Articles Liés

Voir plus