如何使用隐藏的iframe + jquery进行文件上传?

时间:2010-09-07 16:32:17

标签: php jquery file-upload

我们都知道单独使用jquery无法进行文件上传。但是可以使用jquery和隐藏的IFrame来解决这个问题。

我找到了四种使用这种方法的解决方案,但看不出我如何实现它们。

  1. This solution found here on Stackoverflow,是这样做的一种方式。但我不确定这是不是最好的方式。 (未经测试)

  2. Using jQuery Form plugin是另一种选择。我试过跟this example,但没有帮助。该解决方案将我的uploader.php加载到新页面中,但无法获取文件信息。我无法使用IFrame看到它。

  3. Ajax File Upload是另一个解决方案 - 这个是装箱动态IFrame。看一下示例代码,我无法确定如何实现它。

  4. 最后一个解决方案是来自Webtoolkit的AJAX file upload。在这里,我无法弄清楚应该在哪里声明它应该为文件处理加载什么PHP文件。

  5. 是否有人使用其中一种方法有一个工作示例? 我在另一个解决方案中使用了Uploadify - 但我现在不想使用flash。

1 个答案:

答案 0 :(得分:2)

对于#3这基本上就在他们的网站上。

我是.Net的家伙,所以我无法真正帮助你接收文件所需的.php处理程序,但我希望你发现它很有用。

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