PHP iframe one file upload

Question

Using an iframe, how could a user of my website upload a file without reloading the entire page? I have found many jQuery plugins, but they are just too big for this task. The user just needs to upload one file without filling out the other inputs.

Answer 1

An iframe is an entire html page that is loaded inside of your page. All you need to do is create an html page with a form that lets the user select a file and then either have an upload button (a submit button that says upload) or use javascript with the "onchange" event to have the file upload automatically. And just have it all load inside the iframe.

On a side note, if you need to have the file name available to the parent window of the iframe you will also have to have javascript pass the file name to the parent window when the file get uploaded.

Here's a trimmed down version of some code I have used. Place it inside of normal html page and load that page in an iframe.

The Form:

<form action="thispagename.html" method="post" enctype="multipart/form-data">
    <input type="file" id="userfile" name="userfile" value="" onchange="SendToParent(this, 'fieldinparent')" /><br/>
    <button type="submit" id="uploadfile" name="uploadfile">Upload File</button>
</form>

The Javascript:

function SendToParent(origin, destination)
{
    parent.document.getElementById(destination).value = origin.value;
}

Basically that about all there is if you need it to submit automatically you can add an additional function to the "onchange" event to handle the automatic submit.

Answer 2

You can use ajax. Jquery and other libraries and plugins make this very easy