Tengo un formulario simple donde un usuario puede cargar varias imágenes. Solo quiero que el usuario suba 4 imágenes a la vez, así que hice lo siguiente:
$("#myfile").on("change", function() { if ($("#myfile")[0].files.length > 4) { alert("You can select only 4 images"); } }); <input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">Esto genera una alerta cuando el usuario sube más de 4 imágenes, pero no impide que envíe el formulario.
¿Alguien puede decirme cómo borrar las imágenes cargadas por el usuario si el límite excede o deshabilitar el botón de envío?
Implementaré la estrategia de deshabilitar atributos como dije en los comentarios:
$("#myfile").on("change", function() { if ($("#myfile")[0].files.length > 4) { alert("You can select only 4 images"); $(".form-control").prop("disabled",true); } });Con el código anterior, el usuario no podrá enviar el formulario.
En este caso, es mejor crear una variable más con estado de marca y luego verificarla antes de enviar un formulario.
Algo como eso:
let flag = false; $("#myfile").on("change", function() { if ($("#myfile")[0].files.length > 4) { alert("You can select only 4 images"); flag = true; } }); if(!flag){ $('#form').submit(); }