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

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

我已经创建了用于上传的实际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参数（即

$\u POST[“upload”]

和

$\u文件[“image”]

）传递给PHP函数？我知道这应该很简单，但我被卡住了。谢谢你的澄清

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

用户浏览要上载的图像

PHP将图像上传到服务器机器上的指定位置

（这是至关重要的）成功上载后，上载的文件将显示在预定义的标记中。你能就如何实现第三步提出一些建议吗？非常感谢

---

您将无法通过AJAX进行文件上载

AJAX拦截的基本功能是序列化表单上的值（您可以在控制台上尝试

$（“#form_id”）.serialize（）

，查看它的功能）

---

因为该文件是从磁盘读取的，所以在提交时您没有可用的数据，也不能像使用常规字段那样通过AJAX进行操作。

虽然当时公认的答案可能是准确的，但自2011年初以来，情况发生了一些变化。即使现在，Stackoverflow上仍有一些评论者坚持认为不能通过ajax上传文件这根本不是真的。

通过Ajax上传文件，带参数：选项1 与的组合允许您通过“ajax”发送文件。您可以使用，它允许您在请求负载中包括参数和文件。通过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请求，那么您的参数无论如何都应该在有效负载中。一个小麻烦涉及内容长度标题值

通过带参数的Ajax上传文件：选项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，都有足够的文件API支持，使这一切成为可能

---

对于不支持文件API的浏览器，您必须使用

上传文件。您可以创建一个隐藏的iframe（或多个iframe），其主体包含表示文件和参数的元素

，并通过javascript提交该表单，使应用程序具有“ajaxy”外观，即使没有文件API支持。

好的，明白了。我的最终目标是实现以下目标：1。用户浏览要上载的图像。2.PHP将图像上传到服务器机器上的指定位置。3.（这是至关重要的）成功上载后，上载的文件将显示在预定义的

标记中。你能就如何实现第三步提出一些建议吗？非常感谢。