Comment limiter les fichiers maximum choisis lors de l'utilisation de l'entrée de fichiers multiples
en utilisant <input type="file" multiple> il est possible pour l'utilisateur de choisir plusieurs fichiers.
comment définit-on une limite pour le nombre de fichiers pouvant être choisis, par exemple deux?
5 réponses
vous pouvez exécuter une validation côté client de jQuery pour vérifier:
$(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 /
mais n'oubliez pas de vérifier du côté du serveur car la validation côté client peut être contournée assez facilement.
<strong>On change of the input track how many files are selected:</strong>
<script>
$("#image").on("change", function() {
if($("#image")[0].files.length > 2) {
alert("You can select only 2 images");
} else {
$("#imageUploadForm").submit();
}
});
</script>
<input name="image[]" id="image" type="file" multiple="multiple" accept="image/jpg, image/jpeg" >
vous devriez également envisager d'utiliser les bibliothèques pour faire cela: elles permettent de limiter et beaucoup plus:
-
FineUploader . Démo à l'aide
validation.itemLimitde 5.16.2:var restrictedUploader = new qq.FineUploader({ validation: { itemLimit: 3, } }); -
Bluimp's jQuery File Upload Plugin . Utilisation: fichier jquery upload limitant le nombre de fichiers utilisant
maxNumberOfFilesà partir de v9.22.0:$('#fileuploadbasic').fileupload({ maxNumberOfFiles: 6 });
ils sont également disponibles à https://cdnjs.com/
cela devrait fonctionner et protéger votre formulaire d'être soumis si le nombre de fichiers est plus grand que 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);
}
});
});
utilisez deux <input type=file> éléments à la place, sans l'attribut multiple .