Apprenez à lire et à enregistrer des fichiers avec JavaScript

La colonne

javascript explique comment lire et enregistrer des fichiers à l'aide de JavaScript.

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

Parce que Google ne fournit pas encore de plug de synchronisation -in fonction de données, donc l'importation et l'exportation de configurations de plug-ins doivent traiter des 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 à utiliser :

 <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 à handleFiles() en paramètre fonction.

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é à 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 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, le contrôle input:file 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 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 (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.

最后，用URL.revokeObjectURL()来释放这个object URL，通知浏览器可以不必继续引用这个文件了。

下面就是一段化简的代码：

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');

测试时会提示保存一个文本文件。Chrome需要把网页放在服务器上或插件里。

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

	/**
	 * 写文件
	 * @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);
       } 
	}

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!