How to upload multiple files one by one?

Question

When i select the files together and submit the form, All the files get uploaded. But if i select if one by one and click submit. Only one file gets uploaded.

<html>
 <form role="form" class="form-horizontal" enctype="multipart/form-data"  action="submit.php" method='post' >
<input name="files[]" id="files" type="file" class="btn btn-primary" multiple="multiple"  accept="application/pdf,image/jpeg,image/gif,image/png,video/mp4" />

</form>


<script>
$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\"><i class='fa fa fa-times' aria-hidden='true'></i></span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });

        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
</script>
</html>

Anshu · Accepted Answer · 2019-06-11 15:57:10Z

The current behavior of your code is as expected.The input type=file will allow you to select multiple files in one go and submit the form when the multiple tag is set.But in your case when you open the browse window and select a single file , only that file will get submitted.

And even when you select files one by one by opening the browse the context gets cleared and only the last file you choose gets selected for submit.If you want to override this default behavior , you will have to handle it yourself in javascript , which is not recommended.

Use the following jquery plugin to achieve those features, as it would avoid a lot of boiler plate code and time :

https://blueimp.github.io/jQuery-File-Upload/basic.html

<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery File Upload Example</title>
    </head>
    <body>
        <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/vendor/jquery.ui.widget.js"></script>
        <script src="js/jquery.iframe-transport.js"></script>
        <script src="js/jquery.fileupload.js"></script>
        <script>
            $(function () {
                $('#fileupload').fileupload({
                     dataType: 'json',
                     done: function (e, data) {
                        $.each(data.result.files, function (index, file) {
                            $('<p/>').text(file.name).appendTo(document.body);
                         });
                     }
                });
            });
        </script>
    </body>
</html>

Just the above code will submit files as you choose them, but you can customize it to have progress bars,select multiple files in one go or one by one after reading the documentation provided.

Official doc: read

Sanjun Dev · Accepted Answer · 2019-06-11 05:36:49Z

0

I suggest to you to use any Jquery file upload plugin.

It will show the progress and drag and drop support, and it handles AJax upload functionality, so you can upload multiple files by selecting one by one.

I reccomend this one https://innostudio.de/fileuploader/

or you can find a lot of list https://jqueryhouse.com/jquery-file-upload-plugins/

answered Jun 11, 2019 at 5:36

Sanjun Dev

5189 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to upload multiple files one by one?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related