Partage de code graphique et texte HTML5 FileAPI-Tutoriel H5-php.cn

Partage de code graphique et texte HTML5 FileAPI

黄舟

Libérer： 2017-03-28 16:00:28

original

1702 Les gens l'ont consulté

Dans HTML5, une API sur les opérations sur les fichiers est fournie. Grâce à cette API, le traitement associé à l'accès au système de fichiers local à partir de la page Web devient très simple. simple. Jusqu'à présent, seuls certains navigateurs le prennent en charge.

1.File List objet et objet File

L'objet FileList représente une liste de fichiers sélectionnés par l'utilisateur , en HTML4, un seul fichier peut être placé dans le contrôle de fichier, mais en HTML5, plusieurs fichiers peuvent être placés dans le contrôle de fichier en ajoutant l'attribut multiple. Chaque fichier sélectionné par l'utilisateur dans le contrôle est un objet fichier et FileList est une liste de ces objets fichier, représentant tous les fichiers sélectionnés par l'utilisateur. L'objet fichier a deux attributs, l'un est name, ce qui signifie que le nom du fichier n'inclut pas le chemin du fichier ; l'autre est lastModifiedDate, ce qui signifie la date à laquelle le fichier a été modifié pour la dernière fois.

<!DOCTYPE html>
<html>
    <head>
        <meta charset=&#39;UTF-8&#39;/>
        <title>FileList and File </title>
        <script type="text/javascript" language="JavaScript">
function showFiles(){
var file,
                len = document.getElementById(&#39;file&#39;).files.length;//返回FileList文件列表对象
for (var i=0; i < len; i++) {
                  file = document.getElementById(&#39;file&#39;).files[i];
                  alert(file.name);
                };
                
            }            
</script>               
    </head>
    <body>
        <input type="file" id=&#39;file&#39; multiple="multiple" width="80px"/>
        <input type="button" id="bt1" value="click" onclick="showFiles();"/>
    </body>
</html>

Copier après la connexion

2. Objet Blob

En ce qui concerne les objets Blob, certaines personnes peuvent penser aux champs Blob dans OracleDB, qui ont une signification quelque peu similaire. Blob en HTML5 représente des données brutes binaires. Il fournit une méthode slice() grâce à laquelle vous pouvez accéder au bloc de données brutes à l'intérieur des octets. En fait, l'objet file mentionné ci-dessus hérite de l'objet Blob.

Deux attributs de l'objet Blob, size : représente la longueur en octets d'un objet. type : Représente le type MIME d'un objet. S'il s'agit d'un type inconnu, une

chaîne vide est renvoyée.

function showFileInfo(){
                var file = document.getElementById(&#39;file&#39;).files[0];
                var size = document.getElementById(&#39;fileType&#39;);
                var type = document.getElementById(&#39;fileSize&#39;);
                size.innerHTML = file.size;
                type.innerHTML = file.type;
            }

Copier après la connexion

Pour les fichiers de type image, l'attribut type de l'objet Blob commence par image/. Cette fonctionnalité peut être utilisée pour déterminer le type de fichier sélectionné par l'utilisateur.

function showFileInfo(){
                var file = document.getElementById(&#39;file&#39;).files[0];
                if(checkImage(file)){
                var size = document.getElementById(&#39;fileType&#39;);
                var type = document.getElementById(&#39;fileSize&#39;);
                size.innerHTML = file.size;
                type.innerHTML = file.type;
                }
                else{
                    return ;
                }
            }
            function checkImage(file){
                if(!/img\/\w+/.test(file.type)){
                    alert(file.name + "不是图片");
                    return false;
                }
                return true;
            }

Copier après la connexion

De plus, le contrôle de fichiers ajoute l'attribut accept dans la norme HTML5 pour limiter les types de fichiers acceptés, mais actuellement la prise en charge de l'alignement de chaque navigateur est limitée à la sélection d'images par défaut lors de l'ouverture du fenêtre de sélection de fichier. C'est juste un fichier. Si vous choisissez d'autres types, le contrôle peut également l'accepter.

3.Interface FileReader

3.1 Méthodes d'interface

L'interface FileReader propose quatre méthodes, dont 3 sont utilisées pour

lire des fichiers et 1 est utilisée pour interrompre la lecture du fichier.

方法名	参数	描述
readAsBinaryString()	file	将文件读取为二进制字符串，通常将它传到后端，后端可以通过这段字符串存储文件
readAsDataURL()	file	将文件读取为一段data url字符串，事实上是将小文件以一种特格式的URL地址直接读取到页面。小文件通常指图片与html等格式文件
readAsText()	file [encoding]	将文件以文本的方式读取，其中第二个参数为文本的编码。
abort()	(none)	中断读取操作。

Il est à noter que que la lecture soit réussie ou échouée, la méthode ne retournera pas le résultat de la lecture, le Le résultat sera renvoyé dans l'attribut result.

　3.2 Interface

Événements

　L'interface FileReader fournit un ensemble complet de modèles d'événements pour capturer l'état lors de la lecture de fichiers.

事件	描述
onabort	数据读取中断时发生
onerror	数据读取出错时发生
onloadstart	数据读取开始时发生
onload	数据读取成功完成时发生
onloadend	数据读取完成时发生无论读取成功还是失败
onprogess	数据读取中