How can I use jQuery to dynamically load html into an iFrame?

StackOverflow https://stackoverflow.com/questions/16380997

  •  14-04-2022
  •  | 
  •  

質問

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?

役に立ちましたか？

解決

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>

他のヒント

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top