如何逐个上传多个文件？
[英]How to upload multiple files one by one?
问题描述
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 个解决方案
解决方案1
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. 代码的当前行为符合预期。 input type=file将允许您一次选择多个文件并在设置多个标记时提交表单。但在您打开浏览窗口并选择单个文件时文件，只有该文件将被提交。
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. 即使您通过打开浏览逐个选择文件，上下文也会被清除，只有您选择的最后一个文件被选中进行提交。如果您想要覆盖此默认行为，则必须自己在javascript中处理它，这是不建议。
Use the following jquery plugin to achieve those features, as it would avoid a lot of boiler plate code and time : 使用以下jquery插件来实现这些功能，因为它可以避免大量的锅炉板代码和时间：
https://blueimp.github.io/jQuery-File-Upload/basic.html 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. 上面的代码只会在您选择时提交文件，但您可以自定义它以获得进度条，在阅读提供的文档后一次选择多个文件或逐个选择。
解决方案2
0 2019-06-11 05:36:49
I suggest to you to use any Jquery file upload plugin. 我建议你使用任何Jquery文件上传插件。
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. 它将显示进度和拖放支持，并处理AJax上传功能，因此您可以逐个选择上传多个文件。
I reccomend this one https://innostudio.de/fileuploader/ 我推荐这个https://innostudio.de/fileuploader/
or you can find a lot of list https://jqueryhouse.com/jquery-file-upload-plugins/ 或者你可以找到很多列表https://jqueryhouse.com/jquery-file-upload-plugins/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.