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

Posted 2023-05-09

【中文标题】如何使用 Ajax 将表单定位到 iframe？

【英文标题】：How to target form to iframe with Ajax?

【发布时间】：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';

但没有运气。

有人可以指导我吗？

【参考方案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);