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

Question

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

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

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

newupload является идентификатор входа
newimgform является идентификатор вида
postframe является идентификатор фрейма

$("#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(); 
    }); 
}); 

I искал, чтобы кто-то еще пытался это сделать, и я видел некоторые ответы здесь, что разговоры о submit связаны несколько раз, и мне нужно использовать 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 мы вызываем вызовы функций.