How can I do File Upload using hidden iframe + jquery?

Question

We all know it's not possible to do file upload using jquery alone. But it is possible to do a work around using jquery and hidden IFrame.

I have found four solutions using this method, but don't see how I can implenent them.

This solution found here on Stackoverflow, is one way of doing it. But I'm not sure if it's the best way. (not tested)
Using jQuery Form plugin is another option. I tried following this example, but it did not help. The solution loads my uploader.php in a new page and it's not able to get file info. I can't see it using IFrame.
Ajax File Upload is another solution - this one is crating a dynamic IFrame. Looking at the example code, I can't fiure out how to implement this.
The last solution is AJAX file upload from Webtoolkit. Here I can't figure out where I should declare what PHP file it should load for file handling.

Does anyone have a working example using one of these methods?
I have used Uploadify in a another solution - but I don't want to use flash now.

First one is good enough. I do it so.

Z. Zlatev
– Z. Zlatev

2010-09-07 17:57:03 +00:00
Commented Sep 7, 2010 at 17:57 — Z. Zlatev
– Z. Zlatev, Commented Sep 7, 2010 at 17:57
But where does it say what PHP file should handle the file?

Steven
– Steven

2010-09-07 18:23:51 +00:00
Commented Sep 7, 2010 at 18:23 — Steven
– Steven, Commented Sep 7, 2010 at 18:23

Brandon J. Boone · Accepted Answer · 2010-09-07 20:56:46Z

2

For #3 This is basically right off their website.

I'm a .Net guy, so I can't really help you on the .php handler you'll need to receive the file, but I hope you find this useful.

<html>
  <head>
    <link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
    <script type="text/javascript">
    function ajaxFileUpload()
    {
        $.ajaxFileUpload
        (
            {
                //YOUR URL TO RECEIVE THE FILE
                url: 'http://localhost/testing/postfile.php',
                secureuri:false,
                fileElementId:'fileToUpload',
                dataType: 'json',           
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(data.error);
                    alert(e);
                }
            }
        )
        return false;
    }
    </script>
  </head>
  <body>
    <form name="form" action="" method="POST" enctype="multipart/form-data">
        <table cellpadding="0" cellspacing="0" class="tableForm">
            <thead>
                <tr>
                    <th>Ajax File Upload</th>
                </tr>
            </thead>
            <tbody> 
                <tr>
                    <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>  
                </tr>
                <tr>
                    <td>Please select a file and click Upload button</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
                </tr>
            </tfoot>
        </table>
    </form>
  </body>
</html>

answered Sep 7, 2010 at 20:56

Brandon J. Boone

16.5k4 gold badges78 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steven Over a year ago

Now that I have the uploader.php output correct JSON, I discover that no POST data is being sent, and $_FILES is NULL. Any idea what that could be?

Brandon J. Boone Over a year ago

Looks like you found your answer: stackoverflow.com/questions/3675908/…. Let me know if you need anything else.

Steven Over a year ago

I ended up making a solution using the plugin from # 3. The only problem is that the only data past from the FORM to my uploader.php file, is the $_FILE data. I also need to retrieve $_POST data, so I will try (again) to make a solution using # 2.

Collectives™ on Stack Overflow

How can I do File Upload using hidden iframe + jquery?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related