+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Ajax / Iframe File Upload - Working Example! (/showthread.php?tid=28802)
Ajax / Iframe File Upload - Working Example! - El Forum - 03-22-2010
[eluser]Total Shop UK[/eluser]
Ajax style file upload - Download Zip for full code without "[removed]"
I have just found and modified the code below which seems to work pretty well.
Thought I should share my findings with the community as it's a great snippet of code, I'll change my online shop to contain the code at some point - http://sourceforge.net/projects/totalshopuk/
index.php
Code:
[removed]
function upload_file() {
document.getElementById('upload_form').submit();
document.getElementById('upload_status')[removed] = 'Uploading...';
}
function upload_file_complete(file,status) {
if (status=='complete'){
alert(file);
document.getElementById('upload_status')[removed] = "<strong>Upload Successful!</strong>";
}
}
[removed]
<form id="upload_form" action="upload.php" target="upload_iframe" method="POST" enctype="multipart/form-data">
Upload File: <input name="upload_box" id="upload_box" type="file"> <span id="upload_status" style="height:20px"> </span>
</form>
<iframe name="upload_iframe" src="" style="display:none;">[file_upload]</iframe>upload.php
Code:
[removed]
window.top.upload_file_complete("<?php echo $_FILES['upload_box']['name']; ?>","complete");
[removed]Ajax / Iframe File Upload - Working Example! - El Forum - 03-24-2010
[eluser]Jeremy Gimbel - Conflux Group[/eluser]
Very nice. I did something similar recently and was going to post it, but didn't get around to it yet.
Thanks for sharing!
Ajax / Iframe File Upload - Working Example! - El Forum - 05-19-2010
[eluser]megabyte[/eluser]
How would you do this without nesting a form inside another?
Ajax / Iframe File Upload - Working Example! - El Forum - 05-19-2010
[eluser]Jeremy Gimbel - Conflux Group[/eluser]
I'm not sure you can. The file upload field type is somewhat inherently non-AJAXable. So, all the workarounds are very hackish.
Ajax / Iframe File Upload - Working Example! - El Forum - 05-19-2010
[eluser]megabyte[/eluser]
I've been researching this for a day.
Why not place an iframe inside a form, and do all uploads inside that, then store all the files in a session array for later processing with the parent form.
I've never seen an example, is it because it's too simple and less fancy than using JavaScript as well, or is it not a best practice?
Ajax / Iframe File Upload - Working Example! - El Forum - 05-19-2010
[eluser]Jeremy Gimbel - Conflux Group[/eluser]
That's exactly what we've done. We're just using JavaScript to allow the main document to communicate with the document in the iFrame.
Ajax / Iframe File Upload - Working Example! - El Forum - 05-19-2010
[eluser]megabyte[/eluser]
but you guys dont place the iframe inside the parent form. or at least im pretty sure you dont.
The working example does not have a nested form
Ajax / Iframe File Upload - Working Example! - El Forum - 05-19-2010
[eluser]Jeremy Gimbel - Conflux Group[/eluser]
I'm still a little confused about what you mean.
What I have done (I can try and post some code later) is this:
Main document has a form.
That form has a hidden field for the filename
Then there's an iframe, with a file field.
The file field has JavaScript to submit on change
When submitted, the file uploads and JavaScript update the parent's filename field with the filename for the uploaded file.
In my iframe, I've placed a file upload button image over top of the file field, and made the iframe the size of the button, so it appears as just a button in the parent.
Ajax / Iframe File Upload - Working Example! - El Forum - 05-19-2010
[eluser]megabyte[/eluser]
I have some ideas I'll play with first.
Thanks for the help.
Ajax / Iframe File Upload - Working Example! - El Forum - 03-21-2011
[eluser]chamil sanjeewa[/eluser]
thnks it save my time