通过Ajax上传文件w /参数：选项1

Question

我正在尝试在我的网站上实现文件上传功能。

我已经创建了用于上传的实际PHP脚本，这是我添加到HTML中的内容：

<form enctype="multipart/form-data" action="PHPScripts/upload.php" method="POST">
    <input type="file" id="browseButton" name="image" onchange="this.form.submit();" />
</form>

这会按预期触发upload.php，但是，这不是我想要达到的目标。我想改为实现AJAX。因此，当用户选择文件时，我想触发JavaScript函数，我希望该函数随后调用upload.php。

但是有一个问题：我应该如何通过JavaScript将POST参数（即$_POST["upload"]和$_FILES["image"]）传递给PHP函数？我知道它应该很简单，但我被卡住了。谢谢你的澄清。

更新

Changelog解释说这不可能以我想象的方式实现。我的最终目标是实现以下目标：

用户浏览要上传的图片。
PHP将图像上传到服务器计算机上的指定位置。
（这很关键）上传的文件在成功上传后会显示在预定义的标签中。你能就如何实现第三步提出一些建议吗？非常感谢。

Answer 1

虽然当时接受的答案可能准确，但自2011年初以来情况发生了一些变化。尽管如此，Stackoverflow上还有一些评论者继续坚持认为你无法通过ajax上传文件。 这根本不是真的。

通过Ajax上传文件w /参数：选项1

File API与XMLHttpRequest level 2结合使您可以通过“ajax”发送文件。您可以使用FormData object执行此操作，这允许您在请求有效负载中包含参数和文件。通过XHR发送FormData对象将导致多部分编码请求。

var xhr = new XMLHttpRequest(),
    formData = new FormData();

formData.append('file1', file1);
formData.append('file2', file2);
formData.append('param1', 'foo');
formData.append('param2', 'bar');

xhr.open('POST', '/my/endpoint', true);

xhr.send(formData);

使用FormData的明显好处是能够在同一请求中发送多个文件并在请求有效负载中关联参数。如果您要发送POST或PUT请求，则无论如何您的参数应该在有效负载中。一个小烦恼涉及Content-Length标头值。

通过Ajax上传文件w /参数：选项2

另一个更简单的选择是简单地发送包含整个文件作为请求主体的请求：

var xhr = new XMLHttpRequest();

xhr.open('POST', '/my/endpoint?param1=foo&param2=bar', true);

xhr.send(file1);

使用此方法，任何参数都必须作为URI查询字符串的一部分发送。这个可能在服务器端有点混乱，因为通常期望POST请求的参数在请求主体中发送。请注意，您还必须为每个文件发送单独的请求，这可能会也可能不重要，具体取决于您的工作流程。

浏览器支持通过Ajax上传文件

目前除IE9及更早版本以外的所有浏览器，以及Android 2.3.x，当然还有iOS5，都对File API提供了足够的支持，使这一切成为可能。

对于不支持File API的浏览器，您必须使用<form>上传文件。您可以使用<form>创建隐藏的iframe（或iframe）作为包含代表您的文件和参数的<input>元素的正文，并通过javascript提交该表单以提供“ajaxy” “即使没有File API支持，您的应用程序的外观和感觉。

Answer 2

您将无法通过AJAX上传文件。

基本上，AJAX拦截的作用是将表单上的值序列化（您可以在控制台上尝试$('#form_id').serialize()以查看它的作用）。

由于文件是从磁盘读取的，因此您无法在提交时获得该数据，也无法像使用常规字段那样通过AJAX进行此操作。

如何使用AJAX将HTML表单POST params传递给PHP？

更新

2 个答案:

通过Ajax上传文件w /参数：选项1

通过Ajax上传文件w /参数：选项2

浏览器支持通过Ajax上传文件