JavaScript - Problema con lectura de varios archivos

Pos: 26

Val: 62

Problema con lectura de varios archivos

Publicado por Pedro (72 intervenciones) el 17/08/2022 18:27:43

Buenas tardes.

Quiero leer con un input varios archivos en cliente y obtener la información. (input multiple)

Mi código es :

var reader = new FileReader();

for(let l=0;l<files.length;l++){
var file = files[l];
reader.onload = function (e) {
var tex=reader.result;//alert("tex");
//var n_f=document.getElementById("num_arch").value;
textos[l]=tex;

// para obtener el nombre del archivo
var nombre=files[l].name;
var fini=nombre.indexOf(".");
if(fini>0)nombre=nombre.substring(0,fini);
var k=1*l+1;
document.getElementById("meni"+k).value=nombre;
};
reader.readAsText(file);

llamado desde un input multiple

El navegador me devuelve :

Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable

Lo curioso es que si selecciono un único elemento obtengo su contenido sin problema. El problema es cuando selecciono más de uno.
SUpongo que tendrá que ver con el proceso asíncrono del input.

Alguna idea. Gracias de antemano.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Problema con lectura de varios archivos

Publicado por Ivan (118 intervenciones) el 17/08/2022 21:12:02

Hola,

hace tiempo respondí a una pregunta similar pero no encuentro el post.
Te pongo el código que utilicé para leer varios archivos y mostrarlos en pantalla:

<!DOCTYPE html>

<head>

  <title>Lector de archivos JavaScript</title>

  <script>

    // Función para escapar entidades html

    function escapeHTML(html) {

      var fn = function(tag) {

        var charsToReplace = {

          '&' : '&amp;',

          '<' : '&lt;',

          '>' : '&gt;',

          '"' : '&#34;'

};

        return charsToReplace[tag] || tag;

      return html.replace(/[&<>"]/g, fn);

    // Función para leer archivos de texto

    function leerArchivos() {

      // Obtenemos los archivos del form y creamos un lector para cada archivo

      var files = document.getElementById("myFiles").files;

      for(var i=0; i<files.length; i++) {

        var reader = new FileReader();

        reader.fileName = files[i].name;

        // Hay que crear un evento onload para mostrar el contenido una vez leído

        reader.onload = function(e) {

          console.log(e);

          // Mostramos los datos leídos y "filtrados" a HTML en un nuevo párrafo

          var p = document.createElement("p");

          document.body.appendChild(p);

          p.innerHTML = "Contenido del archivo: " + e.target.fileName + "<br>" + escapeHTML(e.target.result).replaceAll("\n", "<br>");

};

        // Leemos el archivo

        reader.readAsText(files[i]);

  </script>

</head>

<body>

  <h1>Lector JavaScript</h1>

  <p>Ejemplo de lector de archivos JavaScript</p>

  <label>Mis archivos: <input id="myFiles" type="file" onchange="leerArchivos()" multiple /></label>

</body>

</html>

Espero que te sirva.

Un saludo!

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 26

Val: 62

Problema con lectura de varios archivos

Publicado por Pedro (72 intervenciones) el 17/08/2022 21:47:45

Perfecto, Iván, me ha venido genial.

Muchísimas gracias.

A ver si consigo poner usuario y contraseña y valoro la respuesta

Valora esta respuesta

Comentar

Como usar concat

JAVASCRIPT function if