JQuery Подтвердить тип входного файла

У меня есть форма, которая может содержать 0 сотен <input type="file"> элементов. Я назвал их последовательно в зависимости от того, сколько динамически добавлено на страницу.JQuery Подтвердить тип входного файла

Например:

<input type="file" required="" name="fileupload1" id="fileupload1"> 
<input type="file" required="" name="fileupload2" id="fileupload2"> 
<input type="file" required="" name="fileupload3" id="fileupload3"> 
<input type="file" required="" name="fileupload999" id="fileupload999">

В моей JQuery я хочу, чтобы проверить эти входы на приемлемом типа MIME/файла. Как это:

$("#formNew").validate({ 
    rules: { 
     fileupload: { 
      required: true, 
      accept: "image/jpeg, image/pjpeg" 
     } 
    }

Сразу моя проблема заключается в том, что атрибут входных файлов элементов name является динамическим. Он должен быть динамичным, чтобы мое веб-приложение могло правильно обрабатывать каждую загрузку. Поэтому, очевидно, использование «fileupload» не будет работать в разделе правил.

Как установить правила для всех входов, которые имеют имя типа «fileupload»?

Это код, который динамически добавляет входы:

var filenumber = 1; 
$("#AddFile").click(function() { //User clicks button #AddFile 
    $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader"); 
    filenumber++; 
    return false; 
}); 
$("#FileUploader").on('click', '.RemoveFileUpload', function() { //Remove input 
    if (filenumber > 0) { 
     $(this).parent('li').remove(); 
     filenumber--; 
    } 
    return false; 
});

источник

2014-01-05 volume one

Один элементы добавляются, используйте метод правил для добавления правила

//bug fixed thanks to @Sparky 
$('input[name^="fileupload"]').each(function() { 
    $(this).rules('add', { 
     required: true, 
     accept: "image/jpeg, image/pjpeg" 
    }) 
})

Демо: Fiddle

Обновление

var filenumber = 1; 
$("#AddFile").click(function() { //User clicks button #AddFile 
    var $li = $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" required=""/> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader"); 

    $('#FileUpload' + filenumber).rules('add', { 
     required: true, 
     accept: "image/jpeg, image/pjpeg" 
    }) 

    filenumber++; 
    return false; 
});

источник

2014-01-05 02:41:09

Спасибо Арун действительно здорово. Но элементы добавляются/удаляются динамически всякий раз, когда пользователь нажимает кнопку. Не может быть ни одного, ни 1, ни другого. Когда/где я должен добавить метод правил? Я попробовал добавить его в событие формы, но не работал. –

@ volumeone вы можете поделиться кодом, который добавляет элемент –

сделано, пожалуйста, см. Редактирование. Я думал, что когда я нажимаю кнопку отправки формы, он должен проверить, существует ли вход «name^= fileupload», а затем запустить метод правила добавления до того, как каким-то образом будет проведена проверка. Пока что это не сработало, но вы думаете, что я «Правильно ли я думаю? –

Просто используйте the .rules('add') method сразу после создания элемента ...

var filenumber = 1; 
$("#AddFile").click(function() { //User clicks button #AddFile 

    // create the new input element 
    $('<li><input type="file" name="FileUpload' + filenumber + '" id="FileUpload' + filenumber + '" /> <a href="#" class="RemoveFileUpload">Remove</a></li>').prependTo("#FileUploader"); 

    // declare the rule on this newly created input field   
    $('#FileUpload' + filenumber).rules('add', { 
     required: true, // <- with this you would not need 'required' attribute on input 
     accept: "image/jpeg, image/pjpeg" 
    }); 

    filenumber++; // increment counter for next time 

    return false; 
});

Вы все равно должны использовать .validate() для инициализации плагина в готовый обработчик DOM.
Вам все равно необходимо объявить правила для ваших статических элементов, используя .validate(). Независимо от того, какие элементы ввода являются частью формы при загрузке страницы ... объявляют свои правила в пределах .validate().
Вам не нужно использовать .each(), когда вы используете таргетинг только на один элемент с помощью селектора jQuery, присоединенного к .rules().
Вам не нужно атрибут на вашем входном элементе required когда вы объявляя required правило с помощью .validate() или .rules('add'). По какой-либо причине, если вы все еще хотите атрибут HTML5, по крайней мере, используйте правильный формат, например required="required".

Работа DEMO: http://jsfiddle.net/8dAU8/5/

источник

2014-01-05 20:52:30 Sparky

Я пробовал это, и Firebug показывает ошибку «TypeError: s undefined», и форма ломается, поэтому кнопка отправки doesn Работа не работает. На самой веб-странице не отображается ошибка. –

i обновлен jsfiddle, чтобы вы могли видеть проблему htt p: //jsfiddle.net/8dAU8/4/ Попробуйте добавить файл txt или zip и не будет отображаться никаких ошибок. –

@volumeone, мой ошибка. Вы не можете увеличивать счетчик до тех пор, пока не будет объявлено правило. Обратите внимание, что я удалил кучу лишнего кода .... см .: http://jsfiddle.net/8dAU8/5/ – Sparky

Итак, у меня была такая же проблема и, к сожалению, просто добавив к правилам не работает. Я узнал, что accept: и extension: не являются частью JQuery validate.js по умолчанию, и для его работы требуется дополнительный-Methods.js-плагин.

Так что для тех, кто следил за этой веткой, и она по-прежнему не работает, вы можете попробовать добавить additional-Methods.js в свой тег в дополнение к ответу выше, и он должен работать.

источник

2015-10-28 14:25:28 Dedan

Я почесываю голову, пытаясь заставить проверить файл на работу, спасибо за этот ответ! –

JQuery Подтвердить тип входного файла

ответ

Смежные вопросы