ansaurus

Question

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

Answer 1

+2 A:

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"&gt;&lt;/script&gt;
    <script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"&gt;&lt;/script&gt;
    <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>

Brandon Boone 2010-09-07 20:56:46

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?

Steven 2010-09-09 09:52:33

Looks like you found your answer: http://stackoverflow.com/questions/3675908/ajaxfileupload-plugin-does-not-retrieve-post-or-files-data. Let me know if you need anything else.

Brandon Boone 2010-09-09 11:52:54

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.

Steven 2010-09-13 15:23:02

ansaurus

tags:

views:

answers:

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

related questions