Как очистить загруженные пользователем изображения, если превышен лимит файлов в jquery
У меня есть простая форма, в которой пользователь может загружать несколько изображений. Я хочу, чтобы пользователь загружал сразу 4 изображения, поэтому я сделал следующее:
$("#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">Это дает предупреждение, когда пользователь загружает более 4 изображений, но не мешает им отправлять форму.
Может ли кто-нибудь сказать мне, как очистить загруженные пользователем изображения, если лимит превышается, или отключить кнопку отправки?
@DimitrisPapageorgiou на самом деле я новичок в jquery, не могли бы вы рассказать мне, как это сделать, а также у меня есть сомнения, если мы отключим кнопку, можем ли мы снова включить ее, когда пользователь повторно загрузит файлы, чтобы исправить ограничение
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В этом случае лучше создать еще одну переменную со статусом флага, а затем проверять ее перед отправкой формы.
Что-то подобное:
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();
}
это заставляет страницу автоматически перезагружаться несколько раз без остановки
@Adheednihal Конечно. Вы должны сделать прослушиватель событий на кнопке «Отправить». На мой взгляд, лучше сделать просто кнопку или даже span с идентификатором и добавить прослушиватель событий при нажатии на нее. В этом случае вы будете проверять этот флаг только после нажатия. Также вы можете комбинировать это решение с приведенным ниже решением с помощью кнопки отключения.
Я реализую стратегию отключения атрибута, как я сказал в комментариях:
$("#myfile").on("change", function() {
if ($("#myfile")[0].files.length > 4) {
alert("You can select only 4 images");
$(".form-control").prop("disabled",true);
}
});
С приведенным выше кодом пользователь не сможет отправить форму
я пробовал это, это отключает кнопку, но как я могу снова включить ее, когда пользователь повторно загружает правильное количество файлов
если я добавлю else { $("#thatbutton").prop("disabled",false); } , будет ли это иметь какие-либо проблемы
@Adheednihal, вероятно, нет ... это то, что я все равно собирался предложить ... я просто не проверял это ... но если это работает, то, вероятно, вам хорошо идти
как вы сказали, отключите кнопку .... добавьте отключенный атрибут .... это одна стратегия ....