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>
2 answers
solution1
0 2019-06-11 05:29:57
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
solution2
0 2019-06-11 05:36:49
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.