communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Introduction à l'utilisation des compétences du didacticiel HTML5 FileSystem API_html5

Introduction à l'utilisation des compétences du didacticiel HTML5 FileSystem API_html5

WBOY
Libérer： 2016-05-16 15:49:41
original
1320 Les gens l'ont consulté

L'une des forces du HTML5 est qu'il permet aux programmes Web de demander un espace temporaire ou permanent (Quota) où le stockage de données et même des opérations sur les fichiers peuvent être effectués.

FileSystem fournit des opérations telles que la création, le déplacement et la suppression de dossiers et de fichiers, ce qui facilite grandement le traitement local des données. De plus, toutes les données sont dans un bac à sable (sandbox) et les différents programmes Web ne peuvent pas accéder les uns aux autres. l'intégrité et la sécurité des données.

Dans le projet CatWrite, cette fonctionnalité de HTML5 est utilisée pour stocker des données, ce qui est très pratique. Cependant, actuellement, seul le navigateur Chrome prend mieux en charge l'API FileSystem, elle ne peut donc s'exécuter que dans le navigateur Chrome.

En remplissant cette fonction, j'ai consulté beaucoup d'informations. Certaines informations datent d'il y a un an. Cependant, avec les changements de versions des navigateurs, certains codes sont devenus obsolètes. Je vais les résumer et les organiser un par un ici. Seules les API utilisées dans le projet sont répertoriées ici, ce qui constitue un résumé des fonctions réalisées.

Demander un espace
Afin de stocker des données, vous devez postuler au navigateur. S'il s'agit d'un stockage permanent, l'utilisateur sera invité et l'exécution ne se poursuivra qu'après consentement.

Vous devez d'abord déclarer les autorisations souhaitées.

Copier le code
Le code est le suivant :

window.requestFileSystem = window. requestFileSystem || window.webkitRequestFileSystem; //Identification de la demande du système de fichiers
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL; //Obtenir l'autorisation de lecture du fichier en fonction de l'URL

Après avoir obtenu l'autorisation du système Vous pouvez demander de l'espace depuis le navigateur

Copiez le code
Le code est le suivant :

window. requestFileSystem(window.PERSISTENT, //persistent(permanent) ou Temporary(temporary)
1024*1024, //1M
onInitFs, //fonction de rappel après succès
errorHandler); //après erreur Fonction de rappel

Fonction de rappel

Copier le code
Le code est le suivant :

function onInitFs(fs){
fs.root.getDirectory('catwrite_documents', {create: true}, function(dirEntry) {
console .log('Vous venez de créer le répertoire ' dirEntry. name '.');
}, errorHandler
}
//Rappel d'erreur
function errorHandler(err){
var msg = 'Une erreur s'est produite : ';
switch (err.code) {
case FileError.NOT_FOUND_ERR :
msg = 'Fichier ou répertoire introuvable'; FileError.NOT_READABLE_ERR :
msg = 'Fichier ou répertoire non lisible';
break;
case FileError.PATH_EXISTS_ERR :
msg = 'Le fichier ou le répertoire existe déjà'; > case FileError.TYPE_MISMATCH_ERR :
msg = 'Type de fichier invalide';
break ;
msg = 'Erreur inconnue'
break ; .log(msg err);
}


Si vous réussissez, vous regretterez d'avoir appelé la fonction de rappel OnInitFs et utiliserez la méthode getDirectory pour créer un dossier, qui sera discuté ci-dessous.

Mais il y a un problème. Si vous faites cela, cela sera appliqué à chaque chargement de la page. Ce n'est certainement pas ce que nous voulons, c'est pouvoir lire les données lorsqu'il y a des données.


Déterminer si de l'espace a été demandé

Nous devons donc lire les données du navigateur pour voir si elles ont été stockées. Cela utilise une autre API :


Copiez le code

Le code est le suivant :

void queryUsageAndQuota( dans l'url DOMString, dans EntryCallback successCallback, dans ErrorCallback errorCallback

Cette API peut interroger l'état de l'espace du Web actuel, en cas de succès, la fonction de rappel successCallback sera appelée et l'espace utilisé et l'espace total seront transmis à la méthode en tant que paramètres. En cas d'échec, errorCallback est appelé.




Copier le code


Le code est le suivant :

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(utilisé, restant){
if(remaining == ""){
console.log("Aucun espace appliqué. ");
}else{
console.log("espace utilisé" utilisé);
console.log("tout l'espace" restant);
}
},
errorHandler ); ≪/p>


Nous pouvons juger s'il y a de l'espace de candidature en jugeant le paramètre restant. S'il n'y a pas de candidature, revenez à l'étape précédente pour demander de l'espace. S'il y a déjà de l'espace, vous devez obtenir l'espace et le fichier afin de pouvoir exploiter les données.

Obtenir l'entrée du fichier
FileSystem utilise un système de fichiers spécial et un mode sandbox. Les fichiers du bac à sable ne sont pas accessibles sur un ordinateur ou un autre site Web. Vous ne pouvez utiliser que le format d'accès correspondant.

Tapez dans votre navigateur :

?filesystem:http://catcoder.com/persistent/
　

De cette façon, vous pouvez accéder aux données permanentes du site catcoder.com sur cette machine. Remplacez persistant par temporaire pour lire l'espace temporaire.

Ensuite, nous pouvons obtenir l'entrée du fichier via l'URL et l'API correspondante (vous permet de rechercher l'entrée d'un fichier ou d'un répertoire avec une URL locale).

Copier le code
Le code est le suivant :

void solveLocalFileSystemURL(
dans l'url DOMString,
dans EntryCallback successCallback,
dans ErrorCallback errorCallback facultatif
);

Vous pouvez lire les données stockées sur la machine ci-dessous

Copier le code
Le code est le suivant :

var url = "filesystem:http: //" window. location.host "/persistent/catwrite_documents/";
window.resolveLocalFileSystemURL(url,function(fileEntry){
console.log(fileEntry);
var dirReader = fileEntry.createReader( );
var readEntries = function(){
dirReader.readEntries(function(results){
if(!results.length){
create_file_title("Fichier par défaut", "");
console.log ("Aucun fichier!");
}else{
console.log("Lire les résultats.longueur "fichiers");
for(var i = 0; i < résultats . longueur ; je ){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name); ) ;
};
readEntries();
},errorHandler

Étiquettes associées：
api html5
source：php.cn
Article précédent：Comment obtenir un effet de défilement de texte en HTML5 Article suivant：HTML5 CSS3 implémente un formulaire d'inscription example_html5 compétences du didacticiel
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal