Загрузка нескольких файлов с использованием JavaScript

Question

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

Теперь я хочу добавить загрузку нескольких файлов, чтобыПоля формы создаются при нажатии кнопки «Отправить» на первом, а первое удаляется, а следующее начинается после завершения загрузки.Как форма Iframepost может выбрать загрузку следующего файла после его завершения.

$('#id').iframepostform(function(){
post:blah blah
complete:
my functionality
}

теперь я хочу сделать рекурсивные вызовы в форму поста iframe с измененным идентификатором.

Answer 1

Это было сделано много раз раньше. Я бы порекомендовал не писать другой пользовательский загрузчик файлов JavaScript (если у вас нет по какой-либо другой причине). Я рекомендую отличную Pulpload . Я ожидаю, что было бы значительно меньше усилий использовать существующее, хорошо проверенное, проверенное решение по сравнению с новой реализацией.

Редактировать: Это прискорбно! Тем не менее, я построил демо , которое, я надеюсь, поможет вам найти решение. Он не выполняет JQuery AJAX post(), но клонирует форму, увеличивает номера идентификаторов полей, а затем удаляет старую форму после завершения «загрузки». В целях демонстрации я моделирую «загрузку» с помощью простого setTimeout().

Редактировать: Полное решение с .live()

HTML:

<div>
    <form>
        <input type="file" id="form1_field1"/>
        <input type="submit" value="Make it so" id="form1_field2"/>
    </form>
</div>

JavaScript:

$('input[type="submit"]').live('click', function() {
    var formClone = $('form:first-child').clone();

    formClone.find('input').each(function(i) {
        $(this).attr('id', $(this).attr('id').replace(/form(\d+)/, function(fullMatch, n) { return 'form'+(Number(n)+1); }));
    });
    var thisForm = $(this).closest('form');
    $('div').append(formClone).children(':last').hide().fadeIn(1500);

    // do ajax post here (faking the "upload time" with a timeout)
    // but really the "hideFinishedForm" method body needs to
    // go in the upload success callback
    window.setTimeout(hideFinishedForm, 5000, thisForm);

    return false;
});

function hideFinishedForm(formToRemove) {
    $(formToRemove).remove();

    // now submit the next form
    $('form input[type="submit"]').trigger('click');
}

Дальнейшее чтение о Разницах между функциями jQuery `click`,` bind`, `live`,` делегат`, `trigger` и` on` (с примером)?