0

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>
Improve this question

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.