Question

我正在处理iframe文件上传器（因此我的文件上传器似乎是ajax）。我正在尝试将该表单放在我的页面上并将其插入iframe。然后我将在iframe内提交表单。但是，它不起作用。这是我的代码：

jQuery的：

function submitFile() {
    $(document).ready(function() {
        if ($('[name=files]').val() != "")
        {
            var fileForm = $('#attachFile').html();
            $('#emptyDiv').html('<iframe name="hiddenIframe" id="hiddenIFrame">'+fileForm+'</iframe>');
        }
    });
}

HTML：

<body>
    <div id="emptyDiv"></div>
    <div id="attachFile">
        <form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile">
            <input type="file" name="files" id="files">
            <input id="fileUploadButton" type="submit" name="upload" value="Upload File" onclick="submitFile()">
        </form>
    </div>
</body>

这显然不是一个完整的解决方案，但我注意到在提交表单后，我确实设法将iframe插入到<div id="emptyDiv">元素中。但是，iframe内部是以下代码：

#document
<html>
    <head></head>
    <body></body>
</html>

但我期望在iframe内看到的是位于<div id="attachFile">形式内的html内容。我错过了什么？

Answer 1

您不会尝试将表单复制到隐藏的iframe，而是将表单提交给隐藏的iframe。将表单的target属性（或属性）设置为iframe的名称。

var fileForm = $('#attachFile form').prop('target', 'hiddenIframe');
$('#emptyDiv').html('<iframe name="hiddenIframe" id="hiddenIFrame"></iframe>');

或

<form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile" target="hiddenIframe">
    <input type="file" name="files" id="files">
    <input id="fileUploadButton" type="submit" name="upload" value="Upload File" onclick="submitFile()">
</form>

Answer 2

尝试将HTML转换为单独的页面，并使用src的{{1}}属性引用它。

如何使用jQuery将html动态加载到iFrame中？

2 个答案: