document.getElementById('drag_drop').ondrop = function(event) { event.preventDefault(); var form_data = new FormData(); var drop_files = event.dataTransfer.files; for(var count = 0; count < drop_files.length; count++) form_data.append("images[]", drop_files[count]); var ajax_request = new XMLHttpRequest(); ajax_request.open("post", "upload.php"); ajax_request.send(form_data); } #drag_drop{ background-color : #f9f9f9; border : #ccc 4px dashed; line-height : 250px; padding : 12px; font-size : 24px; text-align : center; } <div id="drag_drop">Drag & Drop File Here</div>Este código le permite cargar archivos usando la función "arrastrar y soltar": dejo caer los archivos en el div apropiado (#drag_drop) y con JS creo una solicitud POST al archivo PHP que cargará los archivos...
Lo que quiero hacer es que, tan pronto como el usuario suelte los archivos, redirija a OTRA página html que contenga el script y luego envíe la solicitud al archivo PHP. No tengo idea de cómo no perder los datos de los archivos colocados dentro del div durante el cambio de página (tal vez insertando form_data/drop_files en un elemento de almacenamiento local... (?)).
SIN JQUERÍA.
No he probado esto, pero cuando carga un archivo en su navegador, puede usar createObjectURL() para crear una URL local donde reside su archivo.
Puede guardar esta URL en localStorage (o similar) y leerla en la otra página nuevamente.
const selectedFile = document.getElementById('input').files[0]; const objectURL = window.URL.createObjectURL(selectedFile); localStorage.setItem('UPLOADED_FILE', objectURL); // ... change page const retrievedUrl = localStorage.getItem('UPLOADED_FILE');