Reputation: 7884
On the parent page of my site I use an iframe (with a display:none submit button) containing a file upload form to allow users to upload profile pictures without a parent page reload. The method works on Chrome and FF with either of the following functions ('NoReloadiframe' is the id of the iframe and 'iframePicButton' is the id of the display:none submit button in the picture upload form of the hidden iframe):
function HiddenPicButton() {
document.getElementById('NoReloadiframe').contentWindow.document.getElementById('iframePicButton').click();
}
function HiddenPicButton() {
window.frames['NoReloadiframe'].contentWindow.document.getElementById('iframePicButton').click();
}
and here's the code for the form within the iframe:
<form action="#" enctype="multipart/form-data" method="post" id="HiddenUserPicForm">
<button type="submit" name="iframepicbutton" id="iframePicButton" style="display:none">
</button>
<input type="file" name="ifrpic" id="ifrfile">
</form>
In brief, clicking the file upload button on the parent page calls HiddenPicButton(), which clicks the hidden button inside the iframe and the file uploads without a reload of the parent page.
However, the hidden button click does not occur in either Opera or IE (chrome and FF work exactly as intended). Any pointers on how to remedy this? As a backup, I will revert back to a page reload method as I originally had or try to use Javascript to detect the browser (using the method shown here: Browser detection in JavaScript? ) the user is navigating with and hide the iframe submit button for IE and Opera using an onLoad function.
Upvotes: 0
Views: 1608
Reputation: 15893
Try:
function HiddenPicButton() {
document.getElementById('NoReloadiframe').contentWindow.document.forms[0].submit();
}
Upvotes: 2