Cómo limitar elementos máximos en una entrada múltiple ()

Quiero subir solo 2 artículos. ¿Cómo puedo limitar los elementos máximos en un archivo de entrada múltiple?

Puede ejecutar alguna validación jQuery del lado del cliente para verificar:

$(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/

Pero recuerde verificar también desde el lado del servidor, ya que la validación del lado del cliente se puede eludir con bastante facilidad.

 On change of the input track how many files are selected:   

También debería considerar el uso de bibliotecas para hacer eso: permiten la limitación y mucho más:

  • FineUploader . Manifestación

  • plugin jQuery File Upload de bluimp . Uso: carga de archivo jquery que restringe el número de archivos

También están disponibles en https://cdnjs.com/

Esto debería funcionar y proteger su formulario para que no se envíe si la cantidad de archivos es mayor 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); } }); }); 

Utilice dos elementos lugar, sin el atributo multiple .