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

我对jQuery还是个新手，所以我无法自己解决所有问题。我有用于上传图像的简单

表单

，用于

进度条

的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>

我还尝试：

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

但是没有运气

有谁能在这一点上指导我吗

你有两个问题：

尝试使用

target

后，您正在给它一个值

该值是字符串，不是jQuery对象，因此它没有

html

方法

你需要的东西更像：

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

---

我迫不及待，所以我更加努力，找到了我需要的解决方案。我做了研究并编写了代码。这是：

$(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);
}

---

你能解释一下为什么

不起作用吗？@freeheeler-因为你取消了表单的提交，而是用Ajax发出HTTP请求。

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

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

$(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);
}