Analyse de l'utilisation de l'interface FileReader en HTML5

L'interface FileReader fournit une API asynchrone. En utilisant cette API, vous pouvez accéder de manière asynchrone au système de fichiers dans le thread principal du navigateur et lire les données du fichier. Ici, je vais partager avec vous un exemple détaillé de la façon d'utiliser le. Interface FileReader en HTML5 à travers cet article. Si vous êtes intéressés, amis, jetons un coup d'œil

est utilisé pour lire les fichiers en mémoire et lire les données du fichier. L'interface FileReader fournit une API asynchrone, qui peut être utilisée pour accéder au système de fichiers de manière asynchrone dans le thread principal du navigateur et lire les données du fichier. Jusqu'à présent, seuls FF3.6+ et Chrome6.0+ ont implémenté l'interface FileReader.

1. Méthodes de l'interface FileReader

L'interface FileReader dispose de 4 méthodes, dont 3 sont utilisées pour lire des fichiers, et l'autre est utilisé pour interrompre la lecture. Que la lecture réussisse ou échoue, la méthode ne renvoie pas le résultat de la lecture, qui est stocké dans l'attribut result.

Méthodes d'interface FileReader

Nom de la méthode

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

Paramètres

Description

readAsBinaryString

fichier

Lire le fichier en codage binaire

readAsText

fichier,[encoding]

Lire le fichier sous forme de texte

readAsDataURL

fichier

Lire le fichier en tant que DataURL

abandonner

(aucun)

Opération de lecture du terminal

2. Événement d'interface FileReader

FileReader L'interface contient un modèle d'événement complet pour capturer l'état lors de la lecture des fichiers.

Événements de l'interface FileReader

Événement

Description

onabort

Interruption

onerror

Erreur

onloadstart

Démarrer

en cours

Lecture

en cours

Lecture réussie

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

onloadend

Lecture terminée, Indépendamment du succès ou de l'échec

3. Utilisation de l'interface FileReader

<script type="text/javascript">  
var result=document.getElementById("result");  
var file=document.getElementById("file");  
//判断浏览器是否支持FileReader接口  
if(typeof FileReader == &#39;undefined&#39;){  
    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";  
    //使选择控件不可操作  
    file.setAttribute("disabled","disabled");  
}  
function readAsDataURL(){  
    //检验是否为图像文件  
    var file = document.getElementById("file").files[0];  
    if(!/image\/\w+/.test(file.type)){  
        alert("看清楚，这个需要图片！");  
        return false;  
    }  
    var reader = new FileReader();  
    //将文件以Data URL形式读入页面  
    reader.readAsDataURL(file);  
    reader.onload=function(e){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=&#39;<img src="&#39; + this.result +&#39;" alt="" />&#39;;  
    }  
}  
function readAsBinaryString(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以二进制形式读入页面  
    reader.readAsBinaryString(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=this.result;  
    }  
}  
function readAsText(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以文本形式读入页面  
    reader.readAsText(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=this.result;  
    }  
}  
</script>  
<p>  
    <label>请选择一个文件：</label>  
    <input type="file" id="file" />  
    <input type="button" value="读取图像" onclick="readAsDataURL()" />  
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />  
    <input type="button" value="读取文本文件" onclick="readAsText()" />  
</p>  
<p id="result" name="result"></p>

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!