Implémentation HTML5 des méthodes d'accès aux fichiers locaux

Cet article présente principalement la méthode d'accès aux fichiers locaux en HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Aujourd'hui, je vais partager avec vous un. Une application simple pour montrer comment utiliser FileReader est une API d'opération de fichiers fournie en HTML5. Les amis qui en ont besoin peuvent en apprendre davantage. Dans les articles précédents, j'ai partagé avec vous plusieurs exemples HTML5, notamment une démonstration de la fonction glisser-déposer, une démonstration du contenu de la page modifiable et une démonstration de la fonction de stockage local. Aujourd'hui, je vais partager avec vous une application simple pour montrer comment utiliser FileReader, une API d'opération de fichiers fournie en HTML5.
Pendant que vous regardiez l'exemple HTML 5 que j'ai écrit plus tôt, je pensais créer un exemple simple mais applicable pour mettre en pratique ces nouvelles fonctionnalités HTML5 d'une manière plus originale. Mon objectif n'est pas simplement de démontrer ces API HTML 5, mais d'utiliser des exemples pour montrer aux développeurs comment implémenter réellement ces API de manière pratique et innovante.
En HTML5, accéder au système de fichiers local à partir d'une page Web devient très simple, c'est-à-dire en utilisant l'API File. Cette spécification de fichier fournit une API pour représenter les objets fichier dans les applications Web. Vous pouvez les sélectionner et accéder à leurs informations par programme. Cette API File comprend :
Une séquence FileList, représentant un tableau composé de fichiers individuels sélectionnés dans le système local. L'interface utilisateur de sélection de fichiers peut être implémentée en appelant .
Une interface Blob, qui représente des données binaires brutes. Grâce à l'objet Blob, vous pouvez accéder aux données d'octets qu'il contient.
Une interface de fichier, qui stocke les informations d'attribut en lecture seule du fichier, telles que le nom du fichier, le type de fichier et l'adresse d'accès aux données du fichier.
Une interface FileReader, qui fournit des méthodes de lecture d'un fichier et un modèle d'événement pour obtenir les résultats de lecture du fichier.
Une interface FileError et un objet FileException, qui sont utilisés pour définir les conditions d'erreur dans cette spécification.
Comment utiliser cet exemple : dans cet exemple, j'ai donné un plan de travail et vous pouvez y faire glisser une image à partir du système de fichiers local, ou vous pouvez également utiliser la zone de sélection de fichier pour sélectionner une image. Dans l'exemple, veuillez sélectionner uniquement les fichiers image, je n'ai pas ajouté de filtrage de fichiers ni de vérification du type de fichier. Veuillez garder à l'esprit qu'aucun navigateur n'implémente entièrement HTML5. Cet exemple doit être exécuté sur un navigateur prenant en charge HTML5, tel que Firefox 3.5 ou supérieur.

La principale façon d'implémenter l'API File est très simple, comme ci-dessous :

function imagesSelected(myFiles) { 
for (var i = 0, f; f = myFiles[i]; i++) { 
var imageReader = new FileReader(); 
imageReader.onload = (function(aFile) { 
return function(e) { 
var span = document.createElement(‘span‘); 
span.innerHTML = [&#39;<img class="images" src="&#39;, e.target.result,&#39;" title="&#39;, aFile.name, &#39;"/>&#39;].join(”); 
document.getElementById(‘thumbs’).insertBefore(span, null); 
}; 
})(f); 
imageReader.readAsDataURL(f); 
} 
} 
function dropIt(e) { 
imagesSelected(e.dataTransfer.files); 
e.stopPropagation(); 
e.preventDefault(); 
}

J'ai choisi de placer mon événement ondrop sur  :

<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”> 
<output id=”thumbs”></output> 
</td>

Dans cet exemple, j'ai simplement fait glisser le fichier local dans le plan de travail. Cependant, je pense que cela peut vous montrer les capacités simples mais puissantes de l'API File

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois !

Recommandations associées :

Comment implémenter la fonction de diffusion vidéo en direct en HTML5

Le terminal mobile utilise H5 pour implémenter la fonction de téléchargement d'images compressées

À propos du code de H5 pour appeler l'appareil photo pour prendre des photos et compresser les images

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!