Soit dit en passant, aujourd'hui, j'ai simplement parcouru le code source de SwitchySharp de proxy et j'ai gagné beaucoup de choses, y compris la lecture et l'enregistrement de fichiers à introduire dans cet article.
Étant donné que Google ne fournit pas la fonction de synchronisation des données de plug-in, l'importation et l'exportation des configurations de plug-in doivent être traitées avec les fichiers. Pour des raisons de sécurité, seul IE fournit une API pour accéder aux fichiers; Mais avec l'arrivée de HTML 5, d'autres navigateurs l'ont également soutenu.
Tout d'abord, parlons de la lecture du fichier. W3C fournit des API de fichiers, dont la classe FileReader est la classe FileReader.
Répertoriez d'abord les balises HTML dont vous avez besoin:
Copiez le code du code comme suit: <entrée type = "file" id = "file" onchange = "handlefiles (this.files)" />
Lorsqu'un fichier est sélectionné, la liste contenant le fichier (un objet FileList) sera transmise sous forme de paramètre à la fonction HandleFiles ().
Cet objet FileList est similaire à un tableau, qui peut dire le nombre de fichiers, et ses éléments sont l'objet de fichier.
À partir de cet objet de fichier, vous pouvez obtenir des attributs tels que le nom, la taille, LastModifiedDate et Type.
Passez cet objet de fichier à la méthode de lecture de l'objet FileReader et vous pouvez lire le fichier.
Il existe 4 méthodes de lecture dans FileReader:
1. ReadasArrayBuffer (fichier): Lisez le fichier comme un ArrayBuffer.
2. Readasbinarystring (fichier): Lisez le fichier comme une chaîne binaire
3.Readasdataurl (fichier): Lisez le fichier comme URL de données
4. Readastext (fichier, [Encoding]): lit le fichier en tant que texte, la valeur de codage par défaut est «UTF-8»
De plus, la méthode abort () peut arrêter de lire le fichier.
L'objet FileReader doit être traité après avoir lu le fichier. Afin de ne pas bloquer le thread actuel, l'API adopte un modèle d'événement, qui peut enregistrer ces événements:
1.onabort: déclenché lorsqu'il est interrompu
2.onerror: déclenché lorsqu'une erreur se produit
3.oné: déclenché lorsque le fichier est lu avec succès
4.NoLotEnd: déclenché lorsque le fichier est lu, qu'il échoue ou non ou non
5.OnloadStart: déclenché lorsque le fichier commence à lire
6.onprogress: déclenche périodiquement lorsque le fichier est lu
Avec ces méthodes, vous pouvez traiter les fichiers.
Essayons d'abord de lire les fichiers texte:
La copie de code est la suivante:
Fonction HandleFiles (fichiers) {
if (files.length) {
var fichier = fichiers [0];
var Reader = new FileReader ();
if (/text//w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.result + '</pre>'). APPENDTO ('Body');
}
reader.readastext (fichier);
}
}
}
Ce.Result ici est en fait Reader.result, qui est le contenu du fichier de lecture.
Après les tests, vous constaterez que le contenu de ce fichier a été ajouté à la page Web. Si vous utilisez Chrome, vous devez mettre la page Web sur le serveur ou dans le plug-in, et le protocole de fichier échouera.
Essayons à nouveau les images, car le navigateur peut afficher directement les images du protocole Data URI, alors ajoutez les images cette fois:
La copie de code est la suivante:
Fonction HandleFiles (fichiers) {
if (files.length) {
var fichier = fichiers [0];
var Reader = new FileReader ();
if (/text//w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.result + '</pre>'). APPENDTO ('Body');
}
reader.readastext (fichier);
} else if (/ image /// w + /. test (file.type)) {
reader.onload = function () {
$ ('<img src = "' + this.result + '" />' ).appendto('body');
}
Reader.ReadAsDataurl (fichier);
}
}
}
En fait, le contrôle de fichier Entrée prend également en charge la sélection de plusieurs fichiers:
La copie de code est la suivante:
<input type = "file" id = "files" multiple = "" onchange = "handlefiles (this.files)" />
De cette façon, HandleFiles () doit être traversé pour traiter les fichiers.
Si vous souhaitez lire uniquement une partie des données, l'objet de fichier dispose également de méthodes WebKitsLice () ou Mozslice (), qui sont utilisées pour générer des objets blob. Cet objet peut être lu par FileReader, tout comme l'objet de fichier. Ces deux méthodes reçoivent 3 paramètres: le premier paramètre est la position de départ; La seconde est la position finale, et lorsqu'elle est omise, la fin du fichier est lue; Le troisième est le type de contenu.
Pour des exemples, veuillez vous référer à "Reading Local Files in 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 de l'Ajax. Le code peut être utilisé pour se référer à "à l'aide de fichiers à partir des applications Web".
Ensuite, enregistrez le fichier.
En fait, Fichier API: Writer fournit 4 interfaces, mais actuellement, seuls certains navigateurs (Chrome 8+ et Firefox 4+) implémentent BlobBuilder, et les autres interfaces ne sont pas disponibles.
Pour les navigateurs non pris en charge, vous pouvez utiliser BLOBBUILDER.js et filessaver.js pour obtenir l'assistance.
Je l'ai étudié et découvert le mystère.
BlobBuilder peut créer un objet blob. Passez cet objet blob à la méthode url.createObjectUrl () et vous pouvez 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 de fichier à l'attribut de téléchargement (pris en charge par Chrome 14+).
Créez ensuite un événement de clic et remettez-le à un élément pour traiter, ce qui amènera le navigateur à télécharger l'objet Blob.
Enfin, utilisez url.RevokeObjectUrl () pour libérer l'URL de l'objet, en informant le navigateur qu'il n'a pas à continuer de référencer le fichier.
Voici un code simplifié:
La copie de code est la suivante:
var blobBuilder = BlobBuilder || Webkitblobbuilder || Mozblobbuilder;
var url = url || WebKiturl || fenêtre;
fonction SAVEAS (blob, nom de fichier) {
var type = blob.type;
var force_savable_type = 'application / octet-stream';
if (type && type! = force_savable_type) {// Force Download, pas ouvert dans le navigateur
var Slice = Blob.slice || blob.webkitslice || blob.mozslice;
BLOB = SLICE.CALL (BLOB, 0, BLOB.SIZE, FORCE_SAVABLEABLE_TYPE);
}
var url = url.createObjectUrl (blob);
var sauve_link = document.createelementns ('http://www.w3.org/1999/xhtml', 'a');
Save_link.href = url;
Save_link.Download = FileName;
var event = document.createEvent ('MouseEvents');
event.initmouseEvent ('click', true, false, fenêtre, 0, 0, 0, 0, 0, false, false, false, false, false, 0, null);
Save_link.DispatchEvent (événement);
Url.RevokeObjectUrl (URL);
}
var bb = nouveau blobBuilder;
BB.APPEND («Hello, World!»);
SAVEAS (bb.getBlob ('Text / PLAIN; charse = UTF-8'), 'Hello World.txt');
Un fichier texte sera invité à enregistrer pendant les tests. Chrome doit placer des pages Web sur le serveur ou dans le plug-in.