Estoy tratando de enviar datos POST (archivos) a una nueva página web o volver a cargar la página y mantener los datos POST usando Javascript.
No puedo usar un formulario porque quiero permitir que el usuario pueda seleccionar varios archivos uno por uno y eso requiere que use preventDefault() y envíe los datos usando Javascript.
Mi código:
var storedFiles = []; const form = document.querySelector('#myform'); document.addEventListener("DOMContentLoaded", initFileStorage, false); function initFileStorage() { // add the change listener on file input document.getElementById("uploadFile") .addEventListener("change", handleFileSelect, false); } function handleFileSelect(e) { // check if any files has been selected. If not, exit if (!e.target.files) return; var files = e.target.files; var filesArr = Array.prototype.slice.call(files); // push new selected files into the common file storage filesArr.forEach((f) => storedFiles.push(f)); } form.addEventListener('submit', (event) => { //disable default form action event.preventDefault(); var uploadName = document.getElementById("uploadnaam").value; //create new formdata let formData = new FormData(); formData.append("theFiles", storedFiles); formData.append("uploadName", uploadName); formData.append("th", 'th'); //configure new XMLHttpRequest const xhr = new XMLHttpRequest(); xhr.open("POST", "index.php", true); xhr.setRequestHeader("Content-Type", "multipart/form-data"); //send data xhr.send(formData); xhr.onload = () => { JSON.stringify(storedFiles); console.log(storedFiles); }; }); <form title='upload files' id='myform'> <h3>Upload File</h3> <input title='input your files here' type="file" id='uploadFile' name='files[]' multiple /> <br> <input type="text" id="uploadnaam" placeholder="naam upload (verplicht)" autocomplete="off"> <br> <button type='submit' id='mySubmitButton' name="save">UPLOAD</button> </form>Entonces, en este momento, cuando envíe los archivos, la página no se volverá a cargar (mi objetivo es ejecutar un archivo llamado filesLogic.php y ahora lo hago incluyéndolo en el encabezado) la página que quiero porque quiero que filesLogic se ejecute con el Datos POST. Y si elimino event.preventDefault(), la página se volverá a cargar pero los datos POST se perderán. ¿Alguien sabe cómo puedo ejecutar filesLogic.php/actualizar la página y mantener los datos de la publicación?