iFrame file uploader

Details

Category: Разработка/Development

Published on Sunday, 18 September 2011 19:54

Bit of theory

Driving from the method's name it uses iframe html element to transfer file at server. That's quite simple. HTML standard supposed ability to transfer parent's window form submitted data to any children frame.How they connected? Via the target attribute into the form and according name into frame. The very base sample looks like:

<form action="async-upload" target="iframe-name">
   <input type="file" name="async-file" />
   <input type="submit" value="upload" />
</form>
<iframe name="iframe-name" src="#";></iframe>

Note the target attribute from the form is the same as name of the frame, where data supposed to be pass. You choose file into form, click submit button, browser pass it into the frame. Current page will not be refreshed, file passed to the server and script async-upload work to them as it supposed to.

Read more...