как контролировать несколько загрузок на счет 5

Question

как контролировать несколько загрузок на счет 5

1

Я хочу загрузить изображения для добавления свойства и иметь код, в котором я могу добавить более 5 загрузок файлов. Как остановить загрузку в пять. вот пример кода, который я использую

<form enctype="multipart/form-data" action="" method="post">
<div id="filediv"><input name="file[]" type="file" id="file"/></div><br/>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
</form>

и код js для кнопки добавления

$('#add_more').click(function() {
$(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'file[]', type: 'file', id: 'file'}),        
$("<br/><br/>")
));
});

как я могу остановить добавить больше кнопки может быть доступно всего за пять.

chaitanya 04 авг. 2015, в 15:10

Источник

0

Вы создаете до 5 элементов div с одним и тем же id не является допустимым HTML и может вызвать проблему в JQuery. Вам нужно изменить id class а затем его законно. Конечно, вам также нужно изменить свой CSS
RiggsFolly 04 авг. 2015, в 12:35
0

var count = 1; $ ('# add_more'). click (function () {if (count> = 5) {$ (this) .before ($ ("<div />", {id: 'filediv'}). fadeIn (' slow '). append ($ ("<input />", {name:' file [] ', тип:' file ', id:' file '}), $ ("<br/> <br/>" )));} else {alert ("Невозможно добавить больше 5")} count ++;});
Dharmendra 04 авг. 2015, в 12:37
0

@Dharmendra Может быть, это будет лучше в качестве ответа, чем мы могли бы прочитать на самом деле. Вы также можете получить очки за это, если это правильно
RiggsFolly 04 авг. 2015, в 12:38
0

@RiggsFolly я добавил код, потому что он может думать о логике.
Dharmendra 04 авг. 2015, в 12:40
0

возможный дубликат подсчета числа JQuery с определенным классом?
RiggsFolly 04 авг. 2015, в 12:40
0

@Dharmendra У меня нет проблем, лучше быть ответом, чем комментарием - это все, что я говорил. Затем вы можете отформатировать его так, чтобы он мог быть прочитан спрашивающему и всем, кто ищет и находит этот вопрос позже
RiggsFolly 04 авг. 2015, в 12:41

Показать ещё 4 комментария

Теги:

php

javascript

upload

3 ответа

Ещё вопросы

Вы создаете до 5 элементов div с одним и тем же id не является допустимым HTML и может вызвать проблему в JQuery. Вам нужно изменить id class а затем его законно. Конечно, вам также нужно изменить свой CSS
var count = 1; $ ('# add_more'). click (function () {if (count> = 5) {$ (this) .before ($ ("<div />", {id: 'filediv'}). fadeIn (' slow '). append ($ ("<input />", {name:' file [] ', тип:' file ', id:' file '}), $ ("<br/> <br/>" )));} else {alert ("Невозможно добавить больше 5")} count ++;});
@Dharmendra Может быть, это будет лучше в качестве ответа, чем мы могли бы прочитать на самом деле. Вы также можете получить очки за это, если это правильно
@RiggsFolly я добавил код, потому что он может думать о логике.
возможный дубликат подсчета числа JQuery с определенным классом?
@Dharmendra У меня нет проблем, лучше быть ответом, чем комментарием - это все, что я говорил. Затем вы можете отформатировать его так, чтобы он мог быть прочитан спрашивающему и всем, кто ищет и находит этот вопрос позже

schellingerht · Answer 1 · 2015-08-04T10-57-00.000Z

Перед добавлением ввода проверьте, есть ли 5 в div с id filediv. Так что да, остановитесь с возвращением.

Я изменил и упростил ваш код, поэтому поля ввода будут добавлены и подсчитаны в одном div (div # filediv).

$('#add_more').click(function() {
   if ($('div#filediv').find('input[type="file"]').length >= 5)
      return;
   $('div#filediv').append(
      $('<input/>', {name: 'file[]', type: 'file', id: 'mustBeUniquePerPage'})
   );
});

Убедитесь, что вы используете уникальный идентификатор на странице!

Более эффективное решение, меньшее количество DOM и интенсивность памяти:

var totalFilesAdded = 0;
$('#add_more').on('click', function() {
   if (totalFilesAdded >= 5)
      return;
   $('div#filediv').append(
      $('<input/>', {name: 'file[]', type: 'file', id: 'mustBeUniquePerPage'})
   );
   totalFilesAdded++;
});

Подробнее читайте здесь, почему лучше использовать.on('click') vs.click(): Разница между.on('click') vs.click()

За исключением того, что вы должны иметь только что-то на HTML-странице с определенным множественным id с одинаковым id это может вызвать проблему JQuery
@RiggsFolly Это дополнение к div, не так ли?
Не вижу .before, он использует один и тот же {id: 'filediv'} во всех добавлениях нового поля ввода. Он действительно должен быть class="filediv" В базовом HTML и дополнении js

HenryTK · Answer 2 · 2015-08-04T10-47-00.000Z

Наиболее важным здесь является то, что вы можете реально ограничить количество загрузок файлов на сервере. Никакие Javascript или HTML никогда не позволят пользователям загружать более 5 файлов. Вам необходимо установить лимиты на сервере.

Директива max_file_uploads PHP.ini позволяет вам ограничить количество файлов, отправленных с помощью запроса POST на загрузку файлов PHP. Даже это ограничит количество загружаемых файлов в одном запросе POST. Вам также необходимо отслеживать в вашей базе данных/файловой системе, сколько из них уже было загружено, и проверить эти ограничения не нарушены.

Атрибут имени, который вы указали на свой элемент input (file[]), подразумевает использование множественного средства загрузки, но ваш HTML не имеет multiple атрибута. Вы можете либо загрузить несколько файлов, в которых пользователи могут одновременно загрузить все 5 изображений, либо продолжать делать это как есть, и проверить, сколько полей input было создано (я не буду отправлять код для этого, как уже сказал другой ответ),

В любом случае, пожалуйста, помните, что вам все равно нужно проверить, сколько файлов уже загружено, поскольку все в HTML и Javascript можно обойти.

Abhilasha · Answer 3 · 2015-08-04T10-47-00.000Z

Вы можете использовать глобальную переменную в качестве счетчика и инициализировать ее до 0. На шаге приращение счетчика. Перед добавлением какого-либо свойства просто проверьте, меньше ли счетчик.

var counter = 0;
$('#add_more').click(function() {
counter = counter+1;
if(counter<=5){
$(this).before(...)
}
)};