Maison  >  Article  >  interface Web  >  Analyse de l'utilisation de l'interface FileReader en HTML5

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

巴扎黑
巴扎黑original
2017-09-02 10:10:531630parcourir

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!

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