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>
This code allow you to upload files using the “drag and drop” function: I drop the files in the apposite div (#drag_drop) and with JS I create a POST request to the PHP file that will upload the files…
What I want to do is that as soon as the user drops the files redirect to ANOTHER html page containing the script and then send the request to the PHP file.
I have no idea how not to lose the data of the files dropped inside the div during the page change (maybe inserting form_data/drop_files in a localstorage item… (?)).
NO JQUERY.