Another possible solution with JS
function onSelect(e) {
if (e.files.length > 5) {
alert("Only 5 files accepted.");
e.preventDefault();
}
}
if you want php you can count the array and just make an if statement like
if((int)count($_FILES['i_dont_know_whats_coming_next'] > 2)
echo "error message";
Use two <input type=file>
elements instead, without the multiple
attribute.
In javascript you can do something like this
<input
ref="fileInput"
multiple
type="file"
style="display: none"
@change="trySubmitFile"
>
and the function can be something like this.
trySubmitFile(e) {
if (this.disabled) return;
const files = e.target.files || e.dataTransfer.files;
if (files.length > 5) {
alert('You are only allowed to upload a maximum of 2 files at a time');
}
if (!files.length) return;
for (let i = 0; i < Math.min(files.length, 2); i++) {
this.fileCallback(files[i]);
}
}
I am also searching for a solution where this can be limited at the time of selecting files but until now I could not find anything like that.
On change of the input track how many files are selected:
$("#image").on("change", function() {_x000D_
if ($("#image")[0].files.length > 2) {_x000D_
alert("You can select only 2 images");_x000D_
} else {_x000D_
$("#imageUploadForm").submit();_x000D_
}_x000D_
});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<strong>On change of the input track how many files are selected:</strong>_x000D_
<input name="image[]" id="image" type="file" multiple="multiple" accept="image/jpg, image/jpeg" >
_x000D_
This should work and protect your form from being submitted if the number of files is greater then 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);
}
});
});
You should also consider using libraries to do that: they allow limiting and much more:
FineUploader. Demo using validation.itemLimit
as of 5.16.2:
var restrictedUploader = new qq.FineUploader({
validation: {
itemLimit: 3,
}
});
bluimp's jQuery File Upload Plugin. Usage: jquery file upload restricting number of files using maxNumberOfFiles
as of v9.22.0:
$('#fileuploadbasic').fileupload({
maxNumberOfFiles: 6
});
They are also available at https://cdnjs.com/
Source: Stackoverflow.com