FileAPI (ReadAsText) et variable globale

Bonjour,

Après beaucoup de lecture, je n'ai pas trouvé de solution à mon problème.
Je réalise une application HTML5 pour analyser et lire des fichier XML stockés en local sur son ordinateur (pas de liaison donc avec quelconque serveurs)

Chaque fichier contient 1 donnée, je dois donc analyser les "n" fichiers pour récupérer 1 valeur afin d'obtenir un tableau que je pourrais afficher (avec un graph ou non)

Sur mon application, j'ai créé une zone de drag'n'Drop pour récupérer les fichiers
Ensuite viens le moment de lire leur contenu que je réalise comme ci-dessous:

function lire_fichier() {		
	for (var i = 0; i < fichiers.length; i++) {
	
		var fichier = new FileReader();
	
		/* A la lecture du fichier */
		fichier.onload = function(event) {
		
			/* on charge le contenu du fichier dans une variable */
  		var contenu_fichier = event.target.result;
  	
  		/* on cherche ce dont on a besoin et on supprime les espaces en début et fin de ligne*/
  		var liste_compteur_str = $.trim($(contenu_fichier).find('measTypes').text());
  	
  	.....
Traitement
.....	

		};	
		fichier.readAsText(fichiers\[\i]);
	}
}

L'API readAsText nécessite de récupérer le résultat dans une fonction callback. Or dans cette fonction callback, il m'est impossible de stocker/récupérer un résultat dans une variable globale.

Du coup, a chaque fichier je suis obligé de faire le traitement complet, et pouvant avoir plus de 200 fichier à traiter, le navigateur plante.

Existe-t-il une solution pour stocker et récupérer ces infos?

Mamax
Modifié par mamax (05 Mar 2014 - 11:36)

mamax a écrit :
L'API readAsText nécessite de récupérer le résultat dans une fonction callback. Or dans cette fonction callback, il m'est impossible de stocker/récupérer un résultat dans une variable globale.

Je ne vois pas où est le problème de vouloir utiliser une variable globale. Tu peux la déclarer en dehors de ta fonction et l'utiliser par la suite, tu peux juste écrire ta variable sans passer par "var" et encore une dernière solution est de l'associer à l'objet "window" (window.maVariable = "valeur") même si c'est ce qui est fait dans le cas précédent.

Ben le souci c'est que dans la fonction call back, je ne peux ni récupérer ni mettre une valeur dans une variable global. seule les fonction locales sont gérée

J'ai bien ma variable globale de déclarée et initialisée.
et depuis cette fonction call back, lorsque j'essaie de la lire, il me retourne rien...

au début de mon fichier JS, je déclare mes variables globale:

var liste_des_compteurs = [];
var fichiers;

J'ai ma fonction qui récupère les fichiers qui est appelée dès qu'un ou plusieurs fichiers ont été déposé dans mon cadre "drag'n'drop'

// Fonction appelée lors de la dépose de fichiers dans le cadre de glisser/déposer
function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();

	// On stock les fichiers déposé dans un tableau d'objet (chaque fichier est un objet de type FileList)
	fichiers = evt.dataTransfer.files;
	
	// On liste tous les fichiers déposé et on génère une liste qui sera affichée
	var output = [];
	for (var i = 0, f; f = fichiers[i]; i++) {
		output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',f.size, ' bytes, last modified: ',f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a','</li>');
	}
	
	// On affiche la liste de fichiers
	document.getElementById('list').innerHTML = output.join('');
	$("#liste_des_fichiers").css('display', 'block');
	
	// On lance la fonction d'analyse des fichiers afin de générer la liste des compteurs disponibles
	get_counter_list();
}

Quand la liste de fichier a été générée, j'appelle ma fonction utilisant l'API ReadAsText;

// Fonction d'analyse des compteurs
function get_counter_list() {
	
	// On réalise l'analyse pour chaque fichier
	for (var i = 0; i < fichiers.length; i++) {
		
		// Création de l'objet fichier qui pour chaque fichier permettra de lire son contenu
		var fichier = new FileReader();
	
		/* A la lecture du fichier */
		fichier.onload = function(event) {
		
			/* on charge le contenu du fichier dans une variable */
  		var contenu_fichier = event.target.result;
  	
  		/* on cherche ce dont on a besoin et on supprime les espaces en début et fin de ligne*/
  		var liste_compteur_str = $.trim($(contenu_fichier).find('measTypes').text());
  	
  		/* On converti la liste en tableau */
  		var tmp = liste_compteur_str.split(' ');
  		var tmp2 = liste_des_compteurs;
  		var tmp3 = tmp2.concat(tmp);
  		liste_des_compteurs = tmp3.unique();
  	
  		/* on affiche les compteurs sous forme d'un formulaire avec une case à cocher sélection chaque compteur */
  		var liste_des_compteurs_formatte = '';
  		for(var i=0; i<liste_des_compteurs.length; i++) {
  			liste_des_compteurs_formatte = liste_des_compteurs_formatte + '<span class="counter"><input type="checkbox" class="cpt"  value="' + liste_des_compteurs[i] + '" /><label for="' + liste_des_compteurs[i] + '">' + liste_des_compteurs[i] + '</label></span>\n';
  		}
 			document.getElementById('counterlist').innerHTML = liste_des_compteurs_formatte;
 			$("#content").show();
		};
		
		// Déclenchement de la lecture du fichier
		fichier.readAsText(fichiers[i]);
	}
}

Et bien si dans une autre fonction (appelée bien sur plus tard), j'essaie d'accéder à la variable liste_des_compteurs, celle-ci est vide...
[/i][/i][/i][/i][/i]
Modifié par mamax (07 Mar 2014 - 15:38)