0

Tengo el problema de querer hacer que PHP reciba todos los archivos que fueron seleccionados en los diferentes inputs file que se generan dinámicamente con JavaScript. Quisiera saber si hay alguna forma de conseguir enviar múltiples archivos de diferentes inputs a PHP mediante AJAX para luego tratar cada archivo en PHP de alguna manera.

Lo que he intentado es lo siguiente:

HTML

<div class="contenedor__examen">

            <div class="contenedor__examen__seccion">
                <p>Nombre de la Pregunta</p>
                <input type="text" class="inputTexto nombrePregunta">

                <p>Respuesta Correcta</p>
                <input type="text" class="inputTexto respuestaCorrecta">

                <div class="contenedor__audio">

                    <input type="file" id="real-file" hidden="hidden" name="audio" class="botonAudio">
                    <button type="button" id="custom-button" class="botonInput" numinput="1">Subir Audio</button>
                    <br>
                    <span id="custom-text" class="textoInput">Ningún audio seleccionado</span>

                </div>

                <p>Texto al Reproducir</p>
                <input type="text" class="inputTexto inputFinal textoAlReproducir">
            </div>

        </div>

El bloque de código de arriba se genera múltiples veces con la algunas diferencias agregadas mediante JS.

JS

valoresAudios = [];

obtenerAudios = () => {
    valoresAudios = [];
    let audios = document.querySelectorAll(".botonAudio");
    audios.forEach((_elemento, indice) => {
        valor = audios[indice];

        valoresAudios.push(valor);
    });
};

btnEnviarExamen.addEventListener("click", (e) => {
    e.preventDefault();
    let nombreDelExamen = nombreExamen.value;
    let temarioAlQuePertenece = valueSelect;

    let enviarExamen = new FormData();
    enviarExamen.append("nombreExamen", nombreDelExamen);
    enviarExamen.append("temarioAlQuePertenece", temarioAlQuePertenece);

    enviarExamen.append(
        "valorNombrePreguntas",
        JSON.stringify(valoresNombresPreguntas)
    );

    enviarExamen.append(
        "valoresRespuestasCorrectas",
        JSON.stringify(valoresRespuestasCorrectas)
    );

    enviarExamen.append("valoresAudios", valoresAudios);

    enviarExamen.append(
        "revaloresTextoAlReproducirspuestas",
        JSON.stringify(valoresTextoAlReproducir)
    );

    xhr = new XMLHttpRequest();
    xhr.open("POST", "/src/admin/examenes/subirExamen.php", true);

    xhr.onload = function () {
        if (this.status === 200) {
            console.log(this.responseText);
        }
    };

    xhr.send(enviarExamen);
});

Hay más código JS pero que no creo que sea relevante, mi problema es enviar por AJAX a PHP todos los inputs file para poder subirlos al servidor y almacenar su ubicación en MYSQL.

PHP

<?php

session_start();

require_once($_SERVER["DOCUMENT_ROOT"] . "/src/admin/comprobarAdmin.php");
require_once($_SERVER["DOCUMENT_ROOT"] . "/src/conexionbd.php");

$valoresAudio = $_POST["valoresAudios"];

for ($i = 0; $i < count($valoresAudio); $i++)
{
    var_dump($_FILES["audio"]['name']);
}

Cualquier ayuda o sugerencia es bienvenida. Gracias de antemano.

7
  • En tu código yo veo un solo input file, no varios como dices en la pregunta. ¿Dónde están los otros? Sea como sea, para que se envíen tienes que ponerlos en el objeto FormData usando append()
    – A. Cedano
    el 17 mar. 2021 a las 17:27
  • 1
    Por que no usa un formulario? es mucho más sencillo. Además junto con fetch y aplicando el evento submit() para enviar un FormData(), recibe en php todos los datos de un formulario usando el atributo name=" " en los inputs.... mucho más practico y limpio
    – ZeroCool
    el 17 mar. 2021 a las 17:28
  • @A.Cedano solo ves uno en la explicación que puse, no se si habrás leído que se agregan varios bloques de HTML dinámicamente. Usé FormData y append, revisa de nuevo el código, el problema es que no se enviar múltiples archivos por AJAX. el 17 mar. 2021 a las 19:24
  • @mafu un formulario no vale porque solo recibe el último input file si todos tienen el mismo name, además tengo que enviar los array generados en javascript y a la vez los input files. Si pudieras explicar el método fetch te lo agradecería. el 17 mar. 2021 a las 19:26
  • He leído que se agregan varios bloques dinámicos y que intentas enviar varios archivos desde diferentes inputs, por eso precisamente mi comentario anterior, se necesita un ejemplo mínimo y verificable en las preguntas para tener una idea completa del problema y poder ayudar de la mejor manera. En este caso, dado que no usas un formulario, tendrás que meter los archivos de alguna manera en el FormData, por ejemplo, asignándole una clase a los 'input` file, recorriéndolos y metiendo cada archivo en el FormData para luego enviarlo completo vía Ajax.
    – A. Cedano
    el 17 mar. 2021 a las 19:37

2 respuestas 2

0

Tú puedes alcanzar los input file por la clase botonAudio con querySelectorAll() y luego recorrer cada input para incluir los archivos en el objeto FormData.

Sería más o menos así. Para la prueba de concepto he ligado la acción al click del botón. Algo curioso en tu código es que los input están ocultos, entonces, no se entiende cómo se podrá seleccionar archivos desde ellos ¿? (he quitado la propiedad hidden para poder hacer la prueba).

Otra cosa es que cuides de que no se creen inputs con el mismo id.

var btnSend = document.getElementById('custom-button');
btnSend.onclick = function() {

  var allFiles = document.querySelectorAll('input[type=file].botonAudio');
  let formData = new FormData();
  allFiles.forEach(f => {
    /*Verificamos que hay archivos*/
    if (f.files.length > 0) {
      formData.append("audio[]", f.files[0]);
    }
  });

  /*Test del formData*/

  for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
  }
};
<div class="contenedor__audio">

  <input type="file" id="real-file1" name="audio" class="botonAudio">

  <input type="file" id="real-file2" name="audio" class="botonAudio">


  <button type="button" id="custom-button" class="botonInput" numinput="1">Subir Audio</button>
  <br>
  <span id="custom-text" class="textoInput">Ningún audio seleccionado</span>

</div>

Quizá esto podría ser más simple si usaras un formulario. Cuando solicitas FormData desde un formulario éste mete dentro todos los elementos con etiqueta name. El único problema es que para los input de tipo file no verifica si están vacíos o no. Si esta validación es importante para ti podrás hacerla de varios modos (no me meto con eso porque se aleja del propósito de la pregunta).

Con un formulario el código quedaría así más o menos, este es el ejemplo básico de MDN, en el que se explica también cómo agregar datos adicionales al FormData.

/*Referencia al form por su nombre*/
var form = document.forms.namedItem("mForm");

/*Listener del submit*/
form.addEventListener('submit', function(ev) {
  /*Objeto FormData*/
  var oData = new FormData(document.forms.namedItem("mForm"));

  /*En caso se necesitarlo*/
  oData.append("CustomField", "This is some extra data");
  
  /*Para que no se recargue la página*/
  ev.preventDefault();

  /*Test de datos*/
  for (var pair of oData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
  }
  
}, false);
<div class="contenedor__audio">
<form enctype="multipart/form-data" method="post" name="mForm">

  <input type="file" id="real-file1" name="audio" class="botonAudio">

  <input type="file" id="real-file2" name="audio" class="botonAudio">


  <button type="submit" id="custom-button" class="botonInput" numinput="1">Subir Audio</button>
  <br>
  <span id="custom-text" class="textoInput">Ningún audio seleccionado</span>
  <input type="submit" value="Stash the file!" />
</form>
</div>

Cualquiera de los métodos que elijas, ya es cuestión de pasar el objeto formData a la petición Ajax y recuperar los datos en el servidor de la manera adecuada.

Espero te sea útil.

26
  • Gracias por la respuesta, con respecto a validar si tienen contenido no te preocupes que eso ya está en el código. Los inputs están ocultos pero con JS cuando se hace clic en un elemento visible se activa el click en el input invisible. Tengo una duda, con respecto a los parámetros f.id y f.files qué significan y luego recibiría los datos normalmente en PHP con $_FILES cuando envíe varios audios? el 18 mar. 2021 a las 15:35
  • @C0D3BREAK3R aquí: formData.append(f.id, f.files[0]); se asociará a cada entrada de formData un par clave/valor, donde la clave será el id que tenga cada input y el valor será el archivo en sí (f en ese contexto sería cada archivo alcanzando por el selector). Luego en el servidor, trabajando con $_FILES podrás encontrar cada archivo asociado a su clave. En lugar de id puedes usar name por ejemplo, pero si los input tienen el mismo name no sé si eso dé problemas a la hora de recibirlos en el servidor, es cuestión de probar.
    – A. Cedano
    el 18 mar. 2021 a las 15:44
  • Gracias. Con un archivo puedo recibir normalmente los datos pero cuando son varios me encuentro con este problema: string(1) "p" string(1) "r" <script data-prepros-origin-host="localhost" src="localhost:300/__prepros-server__/prepros.js"> </script> Las etiquetas script ignoralas que las agrega prepros. Accedo a ellos así: $audios = $_FILES["audio"]['name']; $audiosTipo = $_FILES["audio"]['type']; $audiosTemporal = $_FILES["audio"]['tmp_name']; Y el ciclo para recorrerlos es este: for ($i = 0; $i < 2; $i++) { var_dump($audios[$i]); } el 18 mar. 2021 a las 15:48
  • No entiendo... ¿dónde te encuentras con ese problema @C0D3BREAK3R? ¿Es un mensaje de error o resultado de una depuración? ¿Qué muestra un var_dump($_FILES);
    – A. Cedano
    el 18 mar. 2021 a las 15:50
  • Ese mensaje lo recibo por AJAX y lo veo por la consola el 18 mar. 2021 a las 15:51
0

Muchas gracias a @A.Cedano por toda la ayuda brindad ya que él me orientó mucho para dar con la solución.

Para enviar múltiples archivos por AJAX a PHP hay que acceder a cada uno de ellos, por ejemplo:

let audios = document.querySelectorAll("input[type=file].botonAudio");

Luego, para enviarlos hay que añadirlos al FormData(), aquí un ejemplo:

audios.forEach((audio) => {
        enviarExamen.append("audio[]", audio.files[0]);
    });

La clave para poder recibir múltiples archivos en PHP es nombrar la clave (valga la redundancia) que vamos a enviar con dos corchetes, por ejemplo: audio[], además el valor de la clave debe ser el nombre del arreglo que estamos recorriendo pero añadiendo .files[0], ejemplo: audio.files[0]. Por eso cuando intenté con audio.files[indice] no funcionaba porque el índice tiene que ser 0.

Para recorrer los datos de los archivos enviados a PHP recomiendo enviar por POST la cantidad de archivos, ejemplo:

enviarExamen.append("cantAudios", audios.length);

En PHP para tratar a los archivos realizamos un ciclo for a $_FILES y accedemos a cada valor del array con sus respectivos nombres de índices: name, tmp_name, etc y especificando el índice del valor al que queremos acceder, aquí un ejemplo:

$archivos = $_FILES;
$cantAudios = $_POST['cantAudios'];

$rutasAudios = [];

for ($i = 0; $i < $cantAudios; $i++)
{
    $nombreAudio = $archivos['audio']['name'][$i];
    $temporalAudio = $archivos['audio']['tmp_name'][$i];

    $rutaAudio = $_SERVER["DOCUMENT_ROOT"] . "/audios/$nombreAudio";
    array_push($rutasAudios, $rutaAudio);

    move_uploaded_file($temporalAudio, $rutaAudio);
}

Para nada es complicado enviar múltiples archivos por AJAX, lo recomiendo completamente en vez de usando los formularios ya que además podemos mandar otros datos en arreglos a PHP.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.