I'm working on a website where people can upload files. For the file uploader, I want people to upload one or multiple files. For the multiple file upload, I want the user to be able to select files one by one. I started creating a form with an input type="file".
<form id="myform" action="upload.php" method="post" enctype="multipart/form-data" >
<input type="file" name="myfile[]" id="uploadFile" multiple/>
<div id="upload"></div>
</form>
I then created a javascript file and used jquery to make a list where every selected file gets listed.
<script>
$(document).on('click','.close',function(){
$(this).parents('span').remove();
});
$('#uploadFile').on('change', function() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
var files = $('#uploadFile')[0].files;
for (var i = 0; i < files.length; i++) {
$("#upload").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
}
});
</script>
The thing I want to do now is to upload the whole list with selected files. Now only the last selected file (if chosen one by one) is uploaded. I can't figure out how to do this. I searched for this problem for a long time, but couldn't find a good answer. I'd rather not use Ajax, just javascript/jquery.
Thanks in advance!