如何使用 Ajax 将表单定位到 iframe？答案

【问题标题】：How to target form to iframe with Ajax?如何使用 Ajax 将表单定位到 iframe？
【发布时间】：2015-09-07 12:20:06
【问题描述】：

我还是 jQuery 的新手，所以我无法自己弄清楚所有内容。我有简单的form 用于上传图像，progress bar 的 jQuery 插件，我在材料设计方面进行了样式设置，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';
}

但没有运气。

有人可以指导我吗？

【问题讨论】：

标签： jquery ajax forms iframe target

【解决方案1】：

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

你有两个问题：

您在尝试使用 target 后给它一个值
该值是一个字符串，而不是一个 jQuery 对象，所以它没有 html 方法。

你需要更多类似的东西：

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

【讨论】：

你能解释一下为什么<form target="galleryframe"> 不能正常工作吗？
@freewheeler — 因为您取消了表单的提交，而是使用 Ajax 发出 HTTP 请求。

【解决方案2】：

我等不及了，所以我更加努力并找到了我需要的解决方案。我做了研究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);
}

【讨论】：