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发送数据。然后我可以用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';
}

你有两个问题：

尝试使用后，您将获得target个值
该值是字符串，而不是jQuery对象，因此它没有html方法。

你需要更像的东西：

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

Answer 2

我无法等待，所以我更加努力，找到了我需要的解决方案。我做了研究Documentation for json_decode can be found 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);
}

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

2 个答案: