Exemples de lecture et d'enregistrement de fichiers dans les compétences JavaScript_javascript

Au fait, je viens de jeter un rapide coup d'œil au code source de Proxy SwitchySharp aujourd'hui, et j'ai beaucoup appris, notamment en lisant et en sauvegardant les fichiers que je présenterai dans cet article.

Étant donné que Google ne fournit pas encore la fonction de synchronisation des données du plug-in, l'importation et l'exportation des configurations du plug-in doivent gérer les fichiers. Pour des raisons de sécurité, seul IE fournit des API pour accéder aux fichiers, mais avec l'arrivée de HTML 5, d'autres navigateurs l'ont également pris en charge.

Lisons d’abord le fichier. Le W3C fournit certaines API de fichiers, dont la plus importante est la classe FileReader.

Listez d'abord les balises HTML qui doivent être utilisées :

Copiez le code Le code est le suivant :

< input type="file" id="file" onchange="handleFiles(this.files)"/>

Lorsqu'un fichier est sélectionné, la liste contenant le fichier (un objet FileList ) sera transmis à la fonction handleFiles() en tant que paramètre.
Cet objet FileList est similaire à un tableau, vous pouvez connaître le nombre de fichiers et ses éléments sont des objets File.
Des attributs tels que le nom, la taille, lastModifiedDate et le type peuvent être obtenus à partir de cet objet File.
Passez cet objet File à la méthode read de l'objet FileReader pour lire le fichier.

FileReader dispose de 4 méthodes de lecture :
1.readAsArrayBuffer(file) : lit le fichier en tant que ArrayBuffer.
2.readAsBinaryString(file) : Lire le fichier sous forme de chaîne binaire
3.readAsDataURL(file) : Lire le fichier sous forme d'URL de données
4.readAsText(file, [encoding]) : Le fichier est lu sous forme de texte et la valeur d'encodage par défaut est 'UTF-8'
De plus, la méthode abort() peut arrêter la lecture du fichier.

Après avoir lu le fichier, l'objet FileReader doit encore être traité. Afin de ne pas bloquer le thread en cours, l'API adopte un modèle d'événement, et vous pouvez enregistrer ces événements :
1.onabort : Déclenché lorsqu'il est interrompu
2.onerror : Déclenché lorsqu'une erreur s'est produite
3. onload : Lorsque le fichier est lu avec succès Trigger
4.onloadend : Déclenché lorsque le fichier est lu, quel que soit l'échec
5.onloadstart : Déclenché lorsque la lecture du fichier commence
6.onprogress : Déclenché périodiquement quand le fichier est lu

Avec ces méthodes, vous pouvez traiter des fichiers.
Essayons d'abord de lire un fichier texte :

Copier le code Le code est le suivant :

fonction handleFiles(files) {
if (files .length) {
var file = files[0];
var reader = new FileReader();
if (/text/w /.test(file.type)) {
lecteur.onload = function() {
                   $('

' this.result '

').appendTo('body'); >




This.result ici est en fait reader.result, qui est le contenu du fichier lu.
Testez-le et vous constaterez que le contenu de ce fichier est ajouté à la page Web. Si vous utilisez Chrome, vous devez mettre la page Web sur le serveur ou dans un plug-in. Le protocole de fichier échouera.

Essayons à nouveau les images, car le navigateur peut afficher directement les images du protocole Data URI, je vais donc ajouter des images cette fois :

Copier le code

Le code est le suivant :

fonction handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/ text/w /.test(file.type)) {
                                                                                                                                body');
}
reader.readAsText(file);
} else if(/image/w /.test(file .type)) {
reader.onload = function() {
             $('').appendTo('body');
🎜> }
}



En fait, le contrôle input:file prend également en charge la sélection de plusieurs fichiers :

Copier le code

Le code est le suivant :

De cette façon, handleFiles() doit parcourir et traiter les fichiers.

Si vous ne souhaitez lire qu'une partie des données, l'objet File dispose également des méthodes webkitSlice() ou mozSlice() pour générer des objets Blob. Cet objet peut être lu par FileReader de la même manière que l'objet File. Ces deux méthodes reçoivent 3 paramètres : le premier paramètre est la position de départ ; le deuxième paramètre est la position de fin, s'il est omis, il lira jusqu'à la fin du fichier ; le troisième paramètre est le type de contenu. Pour des exemples, veuillez vous référer à « Lecture de fichiers locaux en JavaScript ».

Bien sûr, en plus d'importer des données et d'afficher des fichiers, il peut également être utilisé pour le téléchargement AJAX. Pour le code, veuillez vous référer à « Utilisation de fichiers à partir d'applications Web ».

L'étape suivante consiste à enregistrer le fichier.

En fait, File API : Writer fournit 4 interfaces, mais actuellement, seuls certains navigateurs (Chrome 8 et Firefox 4) implémentent BlobBuilder, et le reste des interfaces ne sont pas disponibles.

Pour les navigateurs non pris en charge, vous pouvez utiliser BlobBuilder.js et FileSaver.js pour obtenir de l'aide.

J'ai fait des recherches et j'ai découvert le secret.

BlobBuilder peut créer un objet Blob. Transmettez cet objet Blob à la méthode URL.createObjectURL() pour obtenir une URL d'objet. Et cette URL d'objet est l'adresse de téléchargement de cet objet Blob.
Après avoir obtenu l'adresse de téléchargement, créez un élément a, attribuez l'adresse de téléchargement à l'attribut href et attribuez le nom du fichier à l'attribut de téléchargement (pris en charge par Chrome 14).
Créez ensuite un événement de clic et transmettez-le à l'élément a pour traitement, ce qui amènera le navigateur à commencer à télécharger l'objet Blob.

Enfin, utilisez URL.revokeObjectURL() pour libérer l'URL de l'objet et informer le navigateur qu'il n'a plus besoin de référencer ce fichier.

Ce qui suit est un code simplifié :

Copiez le code

Le code est le suivant :var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;var URL = URL webkitURL ||

function saveAs(blob, filename) {

var type = blob.type;
var force_saveable_type = 'application/octet-stream';
if (type && type != force_saveable_type) { // Forcer le téléchargement au lieu de l'ouvrir dans le navigateur var slice = blob.slice || blob.webkitSlice;

blob = slice.call(blob, 0, blob.size, force_saveable_type); >

var url = URL.createObjectURL(blob);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = nom de fichier;

var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
URL.revokeObjectURL(url);
}

var bb = new BlobBuilder;
bb.append('Bonjour tout le monde !');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'bonjour tout le monde. txt');

Vous serez invité à enregistrer un fichier texte pendant le test. Chrome doit placer la page Web sur le serveur ou dans un plug-in.