Ajax 文件上传

Posted 2023-02-24

【中文标题】Ajax 文件上传

【英文标题】：Ajax file upload

【发布时间】：2010-12-26 15:43:19

【问题描述】：

我有一个上传文件的表单，我会使用 ajax 内联处理文件，但我不知道如何使用 ajax 获取数据。

在我的脚本中我使用这种方法：

 $.ajax(
            
                type:    "POST",
                url:     "upload.php",
                data:    ( file : '???' ),
                success: function(msg)
                
                    $('#upload_box').html(msg);
                
            );

如何声明获取文件数据的“文件”变量？ （文件名、tmp_name、类型、大小等）。

【问题讨论】：

你看过 Uploadify 吗？这就是我用于文件上传的内容。非常简单易用。

我更喜欢使用Ajax脚本，而不是flash脚本...我需要制作一个类似gmail的头像脚本，现在我可以用上面描述的方法处理表单，我希望我也可以使用 ajax 处理 FILE 数据...

是jQuery结合flash。该文件通过闪存上传到服务器 TMP 文件夹。从那里 jQuery 调用你whatever.php 文件，你可以在那里处理其余的。她可以获取文件信息、大小等。

【参考方案1】：

您无法使用标准 AJAX 请求来执行此操作。最常见的解决方法是将文件发布到隐藏的 iFrame，如 this tutorial 所示。

由于您使用的是 jQuery，您可能会发现 AJAX Upload 库很有用。

【参考方案2】：

您可以将文件上传到服务器，调用 php 脚本将其读回给您，然后将其转储到您想要读取的任何标签中

            //In your onUpload callback
            var req = createRequest();
            req.open("GET", 'upload.php?file=' + filename,true);

            req.send(null);
            //Do your status checking
            var filetext= req.responseText;

框架并不能解决所有问题，如果您使用的是需要变通的框架，您应该回归基础，因为这可以使用带有一些 PHP 的 vanilla javascript 来完成。

【讨论】：

需要解决的不是框架，而是基本的 HTML 行为。您目前无法在 XHR 中上传文件。

XHR (XMLHTTPRequest) 不是 HTML 行为。它的Javascript。我使用 javascript 和 php 即时创建文件，然后为我的所有 cmets 读回文件，这几乎相同，只是您需要等待文件从临时区域移动到服务器上的最终区域。如果您想了解更多信息，请提出问题并让我知道它在哪里，我会为您发布一些代码。

应该说Http行为。事实上，它比javascript低了一点。大多数浏览器通过 js 提供 API，但 IE 5-6 将其实现为 ActiveX 对象。我的意思是这不是 js 框架问题。

【参考方案3】：

我已经用 Jquery 表单插件 (http://malsup.com/jquery/form/) 解决了