jquery - 如何使用 Ajax 将表单定位到 iframe？

Question

我还是 jQuery 的新手，所以我无法自己弄清楚所有事情。我有用于上传图像的简单 form，用于 progress bar 的 jQuery 插件，我根据 Material 设计对其进行了样式设计，以及带有上传文件的 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 发送数据。然后我可以使用 php 重新加载 iframe 源并立即显示新图像。

我发现我可以通过添加以下内容来重定向整个页面(但显然这不是我需要的):

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

我也尝试过:

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

但运气不好。

有人可以指导我吗？

Answer 1

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

您有两个问题:

1. 您在尝试使用 target 后为其赋予了一个值
2. 该值是一个字符串，而不是 jQuery 对象，因此它没有 html 方法。

你需要更多类似的东西:

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