如何使用Ajax將表單定位到iframe？

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);