CODEWITHSUNDEEP
phpjqueryfile-upload
Steven
Steven

Reputation: 19425

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

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.

  1. 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)

  2. 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.

  3. 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.

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

Upvotes: 4

Views: 5442

Answers (1)

Brandon J. Boone
Brandon J. Boone

Reputation: 16472

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>

Upvotes: 2

Related Questions