Javascript Upload iframe

Information Systems

Javascript Upload iframe

In order to upload a file via javascript without a page refresh and status you need to use an iframe element. An <iframe> is an inline document tag. You're not actually inlining another document per se. You're using it as a place holder so when a form action finishes you get a callback to do some sort of process for instance showing an image.

<form name="fup" id="fup" action="fileup.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="id" value="<? echo $id ?>"/>
Load Photo (JPG, GIf, PNG format)<br />
<br />
<input type="file" name="photo" id="photo" />
<input type="submit" value="Upload Image" />
</form>
<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>

<script>
document.getElementById("fup").onsubmit=function()
{
document.getElementById("fup").target = "upload_target";
document.getElementById("upload_target").onload = uploadDone;
}
function uploadDone()
{
//Function will be called when iframe is loaded
var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
window.location.reload( true );
}

</script>