在 Prototype js 中从 Ajax 请求上传/处理文件答案

【问题标题】：Upload/handle file from Ajax request in Prototype js在 Prototype js 中从 Ajax 请求上传/处理文件
【发布时间】：2017-05-24 20:09:32
【问题描述】：

我正在尝试处理来自prototype.js Ajax 请求的文件，但它不起作用。数据未进入控制器 ($_FILES)。

我在 Magento 的 Checkout 中添加了一个步骤，并希望上传文件以进行下一步。

我也尝试过以下代码。

var request = new Ajax.Request(
                this.saveUrl,
                {
                    method: 'post',
                    requestHeaders: {"X-Prototype-Version": null},
                    contentType: 'multipart/form-data',
                    onComplete: this.onComplete,
                    onSuccess: this.onSave,
                    onFailure: checkout.ajaxFailure.bind(checkout),
                    postBody: formData,
                }
            );

请帮帮我。

【问题讨论】：

标签： magento prototypejs checkout

【解决方案1】：

很抱歉告诉你，通过 ajax 上传文件不会那么容易。

通过 ajax 发布时，文件输入字段要么被跳过，要么你只得到文件名（而不是文件数据）。

虽然有一种方法可以发送二进制数据 - 但它采用了不同的方法。

使用 HTML5 File/FileReader API，您可以在 javascript 中读取文件，然后将文件内容作为请求的正文。

new Ajax.Request('/url.php?rawupload=1&id='+$F('id')+'&label='+label,
{
    'method':'post',
    'postBody':fileobject,
    'onSuccess':function() { alert('success'); }
});

您需要将表单字段放入 GET 参数中，以便将它们传递给您的 PHP 脚本。

在您的 PHP 脚本中，文件内容将像这样提供

$file = file_get_contents('php://input');

$file 将包含您上传文件的内容，您可以将其写入文件系统或读取内容等。

【讨论】：