При загрузке скрытого файла iFrame добавляется дополнительное время для каждой последующей отправки.

Question

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

Сейчас у меня есть форма с <input type="file" />. Я имею в виду, что когда поле ввода изменяется (пользователь выбирает файл), оно должно отправить форму с целевым значением, установленным в iFrame, который загружает скрипт php, а затем сбросить поле ввода, чтобы позволить пользователю снова загрузить файл. Кажется, что происходит, когда форма отправляется в зависимости от количества отправлений формы. например, если вы нажмете кнопку при загрузке страницы, она будет отправлена ​​один раз, однако если вы нажмете кнопку еще раз (без перезагрузки страницы), она будет отправлена ​​два раза, а когда вы нажмете кнопку в третий раз, она отправит форму три раза и т. д.

Вот мой javascript, когда изменяется входной сигнал

newupload - это идентификатор ввода
newimgform - это идентификатор формы
postframe - это идентификатор iframe

$("#newupload").change(function() {
    var max = 5242880, iframe = $("#postframe"), iframeContents;
    $('#newimgform').attr("action", "uploadPicture.php")
    $('#newimgform').attr("method", "post")
    $('#newimgform').attr("MAX_FILE_SIZE", max)
    $('#newimgform').attr("enctype", "multipart/form-data")
    $('#newimgform').attr("encoding", "multipart/form-data")
    $('#newimgform').attr("target", "postframe")
    $('#newimgform').submit();
    $("#postframe").load(function() {
        iframeContents = jQuery.parseJSON($(this.contentDocument).find('body').html());
        alert(iframeContents.filename);
    $("#newimgform")[0].reset();
    });
});

Я искал кого-то еще, кто пытался сделать это, и я видел здесь несколько ответов, что разговор о представлении связан несколько раз, и мне нужно использовать unbind, как $('#newimgform').unbind("submit").submit();, но это, похоже, ничего не делает. Я не могу использовать флэш-загрузчики или что-то еще, так что это должен быть чистый html / javascript / php.

Answer 1

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

$("#newupload").change(function() {
    $('#newimgform').attr({
       action: "uploadPicture.php",
       method: "post",
       MAX_FILE_SIZE: 5242880,
       enctype: "multipart/form-data",
       encoding: "multipart/form-data",
       target: "postframe",
    }).submit();
});

$("#postframe").load(function() {
    var iframeContents = jQuery.parseJSON($(this.contentDocument).find('body').html());
    alert(iframeContents.filename);
    $("#newimgform")[0].reset();
});

Answer 2

Свяжите обработчик событий load вне обработчика событий change.Таким образом, каждый раз, когда вы изменяете значение #newupload, новый обработчик событий привязывается к элементу #postframe:

$("#postframe").load(function() {
    var iframeContents = jQuery.parseJSON($(this.contentDocument).find('body').html());
    alert(iframeContents.filename);
    $("#newimgform")[0].reset();
});
$("#newupload").change(function() {
    $(this).attr("action", "uploadPicture.php")
                    .attr("method", "post")
                    .attr("MAX_FILE_SIZE", 5242880)
                    .attr("enctype", "multipart/form-data")
                    .attr("encoding", "multipart/form-data")
                    .attr("target", "postframe")
                    .submit();
});

Вы можете альтернативно отсоединять обработчик событий load при каждом его запуске, но это кажется ненужным в вашем случае.$(this).unbind('load'); - это все, что вам нужно добавить в обработчик событий load.

Также вы можете оптимизировать это, много.Вы используете один и тот же селектор снова и снова, когда в jQuery мы объединяем вызовы функций.