How can I use jQuery to dynamically load html into

2019-06-05 17:48发布

站内问答 / jQuery
1483 2 6

I'm working on an iframe file uploader (so my file uploader appears to be ajax). I'm trying to take the form on my page and insert it into an iframe. Then I will submit the form inside the iframe. However, it isn't working. Here is my code:

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>

This obviously isn't a complete solution, but I notice that after submitting the form I do manage to get the iframe inserted into the <div id="emptyDiv"> element. However, inside the iframe is the following code:

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

But what I expect to see inside the iframe is the html contents located inside the form <div id="attachFile">. What am I missing?

2条回答
男人必须洒脱
2楼-- · 2019-06-05 18:29

Try turning your HTML into a separate page and referencing it with the src attribute of the iframe.

查看更多
0人赞 添加讨论(0) 举报
beautiful°
3楼-- · 2019-06-05 18:41

You don't try to copy the form to a hidden iframe, you submit the form to the hidden iframe. Set the target attribute (or property) of the form to the name of the iframe.

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

or

<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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)