Question

我有一个包含表单和iframe的模式。表单有一个文件字段并发布到iframe。

php控制器返回上传文件的uniqid（基本上是名称）。上传效果很好，我的iframe包含uniqid。

我想在我的主页上显示这个uniqid。

我的问题是，我不知道如何等待上传结束以显示uniqid。

表单和iframe：

<form id="uploadForm" enctype="multipart/form-data" action="{{ path('lesson_upload') }}" target="uploadFrame" method="post">
    <label for="uploadFile">Document :</label>
    <input id="uploadFile" name="uploadFile" type="file" />
    <br /><br />
    <input class="btn btn-primary" id="uploadSubmit" type="submit" value="Upload" />
</form>
<div id="uploadInfos">
    <div id="uploadStatus">Aucun upload en cours</div>
    <iframe hidden id="uploadFrame" name="uploadFrame"></iframe>
</div>

使用以下格式填充模态的JavaScript：

$(document).on('click', '#computer-upload', function ()
    {
        var url = Routing.generate('lesson_upload_computer');
        $.get(url, function (data)
        {
            $('#modal-various .modal-body').html(data);
            return false;
        });
        return false;
    });

上传结束时的iframe：

<div id="uploadInfos">
    <div id="uploadStatus">Aucun upload en cours</div>
    <iframe hidden="" id="uploadFrame" name="uploadFrame">
    #document
        <html>
            <body>
                <body>533ebac647b7e</body>
            </body>
        </html>
    </iframe>
</div>

有没有人有想法？

谢谢！

Answer 1

如果您没有使用AJAX上传，经过一些研究后，您无法添加检测上传完成时间的事件。

您现在有2个选项：

每隔~100毫秒从iframe 中获取一个ID，如果它不为空或为null，则ID将在：

document.checkForId = function() {
    id = $('#uploadFrame').contents().find('#idInIframeDivOrOtherContainer');
    if (id) {
        window.clearInterval(intervalId);
    }

};
$(document).ready(function() {
    intervalId = window.setInterval('document.checkForId', 100);
});

发布数据时，返回在主页面中设置ID的javascript （如果iframe中有jquery）：

<script>
$(document).ready(function() {
    $('#divInParentWindow', parent.document).text('<?php echo $id; ?>');
});
</script>

Answer 2

如果您的iFrame的源与您的主页位于同一服务器/域级别。您只需在主页面上定义一个功能

即可

function iframeHasLoaded() {
  var body = document.getElementById('uploadFrame').contentWindow.document.body.innerHTML;
}

并且，从您的iFrame

window.onload=function() { parent.iframeHasLoaded() };

这应该有用。

在模态中上传iframe

2 个答案: