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.
FormData
usandoappend()
fetch
y aplicando el eventosubmit()
para enviar unFormData()
, recibe en php todos los datos de un formulario usando el atributoname=" "
en los inputs.... mucho más practico y limpio