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

【问题标题】：How can I do File Upload using hidden iframe + jquery?如何使用隐藏的 iframe + jquery 进行文件上传？
【发布时间】：2011-04-09 07:19:09
【问题描述】：

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

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

This solution found here on Stackoverflow，是一种方法。但我不确定这是否是最好的方法。（未测试）
Using jQuery Form plugin 是另一种选择。我尝试关注this example，但没有帮助。该解决方案将我的 uploader.php 加载到新页面中，但无法获取文件信息。我用 IFrame 看不到它。
Ajax File Upload 是另一种解决方案 - 这个解决方案是创建一个动态 IFrame。查看示例代码，我无法确定如何实现。
最后一个解决方案是来自 Webtoolkit 的 AJAX file upload。在这里我不知道我应该在哪里声明它应该为文件处理加载的 PHP 文件。

有人有使用这些方法之一的工作示例吗？
我在另一个解决方案中使用了 Uploadify - 但我现在不想使用 flash。

【问题讨论】：

第一个就足够了。我这样做了。
但是它在哪里说应该用什么 PHP 文件来处理这个文件呢？

标签： php jquery file-upload

【解决方案1】：

对于#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>

【讨论】：

现在我已经让 uploader.php 输出了正确的 JSON，我发现没有发送 POST 数据，$_FILES 为 NULL。知道那可能是什么吗？
看起来您找到了答案：stackoverflow.com/questions/3675908/…。如果您还需要什么，请告诉我。
我最终使用# 3 中的插件制作了一个解决方案。唯一的问题是，从 FORM 到我的 uploader.php 文件的唯一数据是 $_FILE 数据。我还需要检索$_POST 数据，所以我将（再次）尝试使用#2 来解决。