Как настроить форму в iframe с помощью Ajax?

Question

Я все еще новичок в jQuery, поэтому я не могу все выяснить самостоятельно. У меня есть простой form для загрузки изображений, плагин jQuery для progress bar, который я разработал с точки зрения дизайна материалов, и iFrame с загруженными файлами. Дело в том, что я не могу нацелить эту форму на iframe, она как-то останавливается, я предполагаю конфликт в коде.

Это HTML:

<form action="upload-sys.php" class="upload" enctype="multipart/form-data" method="post" target="galleryframe"> 
    <input class="chooseimg" id="fileToUpload" name="fileToUpload" type="file" /> 
    <input name="submit" type="submit" value="UPLOAD" />&nbsp; 
</form> 

<div class="progress"> 
    <div class="bar"> 
     &nbsp;</div> 
</div> 

<iframe name="galleryframe" onload="javascript:resizeIframe(this);" src="gallery-sys.php"></iframe> 

JQuery:

<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
(function() { 
    var bar = $('.bar'); 
    $('form').ajaxForm({ 
     beforeSend: function() { 
      var percentVal = '0%'; 
      bar.width(percentVal) 
     }, 
     uploadProgress: function(event, position, total, percentComplete) { 
      var percentVal = percentComplete + '%'; 
      bar.width(percentVal) 
     } 
    }); 
})();     
</script> 

Я не понимаю, почему он не отправляет данные в IFRAME. Затем я могу перезагрузить только источник iframe с помощью php и сразу показать новые изображения.

Я узнал, что я не могу перенаправить всю страницу (но, очевидно, что это не то, что мне нужно) с добавлением этого:

complete: function() { 
    window.location.href = "url-of-target-page"; 
} 

Я также попытался:

complete: function(responseText, statusText) { 
    target.html(responseText); 
    var target = 'galleryframe'; 
} 

, но не повезло.

Может ли кто-нибудь навестить меня на этом?

Answer 1

Я не мог ждать, так что я пытался все труднее и найти решение, мне было нужно. Я провел исследование here и написал код, который делает это. Вот он:

$(document).ready(function() { 
    var options = { 
     beforeSend: nullWidth, 
     uploadProgress: flexibleWidth, 
     success: finalized, 
    }; 
    $('#galleryform').ajaxForm(options); 
}); 

function nullWidth(options) { 
     var bar = $('.bar'); 
     var percentVal = '0%'; 
     bar.width(percentVal); 
} 
function flexibleWidth(event, position, total, percentComplete) { 
     var bar = $('.bar'); 
     var percentVal = percentComplete + '%'; 
     bar.width(percentVal); 
} 
function finalized(responseText, attr) { 
     $('#uploadResult').contents().find('body').html(responseText); 
     $('#galleryframe').attr("src", $('#galleryframe').attr("src")); 
     var bar = $('.bar'); 
     var percentVal = '0%'; 
     bar.width(percentVal); 
} 

Answer 2

complete: function(responseText, statusText) { 
    target.html(responseText); 
    var target = 'galleryframe'; 
} 

У вас есть две проблемы:

1. Вы даете target значение после того, как вы пытаетесь использовать его
2. значение является строкой, а не объект JQuery, так что это не имеет метода html.

Вам нужно что-то подобное:

jQuery('iframe[name="galleryframe"]'). 
    contents(). 
    find('body'). 
    html(responseText);