JavaScript Advanced (6) Lecture et enregistrement de fichiers avec JavaScript

Lire et enregistrer des fichiers à l'aide de JavaScript

Étant donné que Google ne fournit pas encore la fonction de synchronisation des données du plug-in, l'importation et l'exportation de configurations de 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 :

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

Lorsqu'un fichier est sélectionné, La liste contenant le fichier (un objet FileList) sera passée à la fonction handleFiles() en 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 de lecture de l'objet FileReader pour lire le fichier.

FileReader dispose de 4 méthodes de lecture :

readAsArrayBuffer(file) : lit le fichier en tant que ArrayBuffer.

readAsBinaryString(file) : lit le fichier sous forme de chaîne binaire

readAsDataURL(file) : lit le fichier sous forme d'URL de données

readAsText(file, [encoding] ) : Lit le fichier sous forme de texte, la valeur d'encodage par défaut est 'UTF-8'

De plus, la méthode abort() peut arrêter la lecture du fichier.

Une fois que l'objet FileReader a lu le fichier, il 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 :

onabort : déclenché lorsqu'il est interrompu

onerror : déclenché lorsqu'une erreur s'est produite

onload : fichier lu avec succès Déclenché lorsque la récupération est terminée

onloadend : déclenché lorsque le fichier est lu, quel que soit l'échec

onloadstart : déclenché lorsque la lecture du fichier commence

onprogress : lorsque le fichier est lu, déclenchez

périodiquement. Avec ces méthodes en place, vous pouvez traiter les fichiers.

Lire le fichier

Essayons d'abord de lire un fichier texte :

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body'); } reader.readAsText(file); } } }

   <span style="font-family: Arial, Helvetica, sans-serif;">这里的this.result实际上就是reader.result，也就是读取出来的文件内容。</span>

Testez-le et vous constaterez que le contenu de ce fichier est ajouté au 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 l'image, car le navigateur peut afficher directement l'image du protocole Data URI, je vais donc ajouter l'image cette fois :

function handleFiles(files) {
    if (files.length) {
        var file = files[0];
        var reader = new FileReader();
        if (/text/w+/.test(file.type)) {
            reader.onload = function() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body'); } reader.readAsText(file); } else if(/image/w+/.test(file.type)) { reader.onload = function() { $('').appendTo('body'); } reader.readAsDataURL(file); } } }

En fait, l'entrée : le contrôle de fichiers prend également en charge la sélection de plusieurs fichiers :

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

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 ».

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 les autres 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 quelques recherches et 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 (supporté 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é :

var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
function saveAs(blob, filename) {
    var type = blob.type;
    var force_saveable_type = 'application/octet-stream';
    if (type && type != force_saveable_type) { // 强制下载，而非在浏览器中打开
        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
        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 = filename;
    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('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');

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

附:写文件工具类(干货)

	/**
	 * 写文件
	 * @param fileName 文件名
	 * @param data	文件流
	 * @param path	写入路径
	 * @return boolean
	 */
	public static boolean writeFile(String fileName,String data,String path) { 
       try { 
    	   
//    	   System.out.println("fileContent:" + data);
    	   
           File file = new File(path + fileName); 
           
           if(!file.exists()){
        	   file.createNewFile();
           }
           
           FileOutputStream outStream = new FileOutputStream(file);
           outStream.write(data.getBytes());  
           outStream.flush(); 
           outStream.close(); 
           outStream = null;
           return(true);
          
       } catch (Exception e) { 
           e.printStackTrace(); 
           return(false);
       } 
	}

美文美图

 

以上就是JavaScript进阶(六)用JavaScript读取和保存文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！