• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Ajax / Iframe File Upload - Working Example!

#1
[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]
&lt;form id="upload_form" action="upload.php" target="upload_iframe" method="POST" enctype="multipart/form-data"&gt;
Upload File:&nbsp;&lt;input name="upload_box" id="upload_box" type="file"&gt;&nbsp;<span id="upload_status" style="height:20px">&nbsp;</span>
&lt;/form&gt;
&lt;iframe name="upload_iframe" src="" style="display:none;"&gt;[file_upload]&lt;/iframe&gt;

upload.php
Code:
[removed]
    window.top.upload_file_complete("&lt;?php echo $_FILES['upload_box']['name']; ?&gt;","complete");
[removed]

#2
[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!

#3
[eluser]megabyte[/eluser]
How would you do this without nesting a form inside another?

#4
[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.

#5
[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?

#6
[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.

#7
[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

#8
[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.

#9
[eluser]megabyte[/eluser]
I have some ideas I'll play with first.

Thanks for the help.

#10
[eluser]chamil sanjeewa[/eluser]
thnks it save my time


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.