0

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!

  • Create a FormData object from the form content, then use jQuery's `$.ajax()` to upload the data to the server. See the duplicate for more information – Rory McCrossan Jul 02 '21 at 12:54

0 Answers0