I want to upload different images from different folders in a single file upload form submit. When I click the upload button for the second time before clicking the submit button, file input field get replace with the latest selections.
Is it possible to append the selections till the submit is clicked.
My JS code displays all the selected file. But submits only the last selections
Here is my HTML
<form name="status-form" id="status-form" method="post" enctype="multipart/form-data">
<input type='file' name='file1[]' id="upload-image" multiple />
<input type='hidden' name='file2' value="aaaaaaaa" />
<div id="upload-img">
<output id="list"></output>
</div>
<br/>
<button type="submit" name="submit" class="btn btn-info" id="status-btn">Send It!</button>
</form>
Here is my JS
var allImages = [];
if (window.FileReader) {
document.getElementById('upload-image').addEventListener('change', handleFileSelect, false);
}
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0; i < files.length; i++) {
var f = files[i];
var reader = new FileReader();
reader.onload = (function(f) {
return function(e) {
document.getElementById('list').innerHTML = document.getElementById('list').innerHTML + ['<img src="', e.target.result,'" title="', f.name, '" width="150" class="image-gap" />'].join('');
};
})(f);
reader.readAsDataURL(f);
}
var formData = $('form').serializeArray();
console.log(formData);
$.ajax({
type:'POST',
url: 'temp.php',
data:formData,
success:function(data){
//code here
},
error: function(data){
//code here
}
});
console.log(folder);
$('#upload-img').addClass('image-div');
}
And my PHP is just a var_dump for the moment
if (isset($_POST['submit'])) {
var_dump($_FILES['file1']);
var_dump($_POST['file2']);
}