При использовании <input type="file" multiple>
для пользователя можно выбрать несколько файлов.
Как они устанавливают ограничение на количество файлов, например, два?
При использовании <input type="file" multiple>
для пользователя можно выбрать несколько файлов.
Как они устанавливают ограничение на количество файлов, например, два?
Вы можете выполнить некоторую проверку на стороне клиента 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/
Но не забудьте проверить на стороне сервера, так как проверка на стороне клиента может быть легко обойдена.
При изменении входной дорожки, сколько файлов выбрано:
$("#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" >
Это должно работать и защищать вашу форму от отправки, если количество файлов больше, чем 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);
}
});
});
Вы также должны рассмотреть возможность использования библиотек для этого: они позволяют ограничивать и многое другое:
FineUploader. Демо с использованием validation.itemLimit
с 5.16.2:
var restrictedUploader = new qq.FineUploader({
validation: {
itemLimit: 3,
}
});
Плагин загрузки файла bluimp jQuery. Использование: загрузка файла jquery с ограничением количества файлов с использованием maxNumberOfFiles
с maxNumberOfFiles
v9.22.0:
$('#fileuploadbasic').fileupload({
maxNumberOfFiles: 6
});
Они также доступны на https://cdnjs.com/
если вы хотите php, вы можете посчитать массив и просто сделать оператор if, как
if((int)count($_FILES['i_dont_know_whats_coming_next'] > 2)
echo "error message";
Вместо этого используйте два <input type=file>
элемента без атрибута multiple
.