Search code examples
javascriptjqueryasp.netiframejquery-file-upload

How to trigger iframe post from parent click event


I am using Jquery multiple file upload control to upload the multiple files. It is very good plug in, All operations are working fine.

I want to load that plug in iframe and i should trigger the global start post back method from parent window

Following is my sample code

LibraryDocs.aspx(parent interface)

> <iframe style="width: 90%; height: 300px" id="multipleFileUploadFrame"
> src="../Secure/MultipleFileUpload.htm" runat="server" />

> <asp:Button ID="postCompleteButton" runat="server" Text="Post Complete" />

Here is my MultipleFileUpload.htm

<div id="fileupload">
        <form id="multipleUpload" action="../Secure/MultipleUploadHandler.ashx" method="POST"
        enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
                <span>Add files...</span>
                <input id="file" type="file" name="files[]" multiple />
            </label>
            <button id="startUpload" type="submit" class="start">
                Start upload</button>
            <button type="reset" class="cancel">
                Cancel upload</button>
            <!--<button type="button" class="delete">Delete files</button>-->

        </div>
        </form>
        <div class="fileupload-content">
            <table class="files">
            </table>
            <div class="fileupload-progressbar">
            </div>
        </div>
    </div>

So my problem is after clicking postCompleteButton button in parent window it should fire the post event(start button) in child window which is in iframe


Solution

  • If you are using jQuery, you can access the iframe DOM using

    $('#<%= multipleFileUploadFrame.ClientID %>').contents()
    

    With this in mind, to click the Start upload button in the iframe, use

    $('#<%= multipleFileUploadFrame.ClientID %>').contents().find('#startUpload').click();
    

    Please keep in mind that this will only work if the parent and iframe source is on the same domain as the browser will adhere to the same origin policy