Html 使用多文件输入时如何限制选择的最大文件数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10105411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to limit the maximum files chosen when using multiple file input
提问by rjmcb
When using <input type="file" multiple>it's possible for the user to choose multiple files.
使用<input type="file" multiple>时，用户可以选择多个文件。
How does ones sets a limit for how many files can be chosen, for instance two?
如何设置可以选择的文件数量的限制，例如两个？
采纳答案by Curt
You could run some jQuery client-side validation to check:
您可以运行一些 jQuery 客户端验证来检查：
$(function(){
$("input[type='submit']").click(function(){
var $fileUpload = $("input[type='file']");
if (parseInt($fileUpload.get(0).files.length)>2){
alert("You can only upload a maximum of 2 files");
}
});
});?
http://jsfiddle.net/Curt/u4NuH/
http://jsfiddle.net/Curt/u4NuH/
But remember to check on the server side too as client-side validation can be bypassed quite easily.
但请记住也要检查服务器端，因为客户端验证可以很容易地绕过。
回答by Kristian Antov
On change of the input track how many files are selected:
在输入轨道更改时选择了多少文件：
$("#image").on("change", function() {
if ($("#image")[0].files.length > 2) {
alert("You can select only 2 images");
} else {
$("#imageUploadForm").submit();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>On change of the input track how many files are selected:</strong>
<input name="image[]" id="image" type="file" multiple="multiple" accept="image/jpg, image/jpeg" >回答by David
This should work and protect your form from being submitted if the number of files is greater then max_file_number.
如果文件数量大于 max_file_number，这应该可以工作并保护您的表单不被提交。
$(function() {
var // Define maximum number of files.
max_file_number = 3,
// Define your form id or class or just tag.
$form = $('form'),
// Define your upload field class or id or tag.
$file_upload = $('#image_upload', $form),
// Define your submit class or id or tag.
$button = $('.submit', $form);
// Disable submit button on page ready.
$button.prop('disabled', 'disabled');
$file_upload.on('change', function () {
var number_of_images = $(this)[0].files.length;
if (number_of_images > max_file_number) {
alert(`You can upload maximum ${max_file_number} files.`);
$(this).val('');
$button.prop('disabled', 'disabled');
} else {
$button.prop('disabled', false);
}
});
});
回答by Enrique
Another possible solution with JS
JS的另一种可能解决方案
function onSelect(e) {
if (e.files.length > 5) {
alert("Only 5 files accepted.");
e.preventDefault();
}
}
回答by Jukka K. Korpela
Use two <input type=file>elements instead, without the multipleattribute.
改用两个<input type=file>元素，不带multiple属性。
回答by MadalinJUPANU
if you want php you can count the array and just make an if statement like
如果你想要 php，你可以计算数组，然后做一个 if 语句，比如
if((int)count($_FILES['i_dont_know_whats_coming_next'] > 2)
echo "error message";
