Comment lire et enregistrer des fichiers en JS ? Présentation de la méthode

JavaScript pour lire et enregistrer des fichiers

Parce que Google ne fournit pas encore la fonction de synchronisation des données du plug-in , importer et exporter la configuration du plug-in, vous devez gérer 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;

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

Copier après la connexion

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)"/>

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

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

	/**
	* 写文件
	* @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!