如何将 javascript 变量作为 $FILE 发送到 PHP 服务器答案

【问题标题】：How to send javascript variable to PHP server as $_FILE如何将 javascript 变量作为 $FILE 发送到 PHP 服务器
【发布时间】：2015-04-22 08:36:03
【问题描述】：

我们在服务器上有 PHP 代码，它接收文件到 $_FILE 中，然后根据用户/安全考虑存储它们。

在客户端，我们目前可以将文件按原样发送到服务器，或者我们希望在本地处理文件（在浏览器中的 js 中的内存中），然后将文件发送到服务器。我们可以使用 JSON 将处理后的文件 POST 到服务器，但是这样做存在问题。

我们更愿意将客户端 javascript 变量的内容发送到服务器以在 $_FILE 中接收。（我们不能假设客户端能够在本地保存文件。）我们是否必须以某种方式模仿 FORM 提交？

我们如何发送一个 javascript 变量以作为 PHP $_FILE 接收？

谢谢！

更新 Blob 似乎是正确的方向，但我们注意到 Blob 大小比进入其中的文件大 50%。 $_FILE 中的文件也大了 50%。我们已经尝试在创建 Blob 时覆盖文件类型，基于 BlobBuilder ruins binary data 等其他帖子，但它并没有解决大小增加 50% 的问题。我们根据收到的拖放文件类型设置 Blob 文件类型。例如，我们上传一个 900K 的 PDF 文件。类型类似于“应用程序/pdf”。生成的 blob 大约为 1,400K。也尝试使用PNG。

【问题讨论】：

标签： javascript php

【解决方案1】：

如果客户端支持Blob 和 XHR2 (FormData)，那么你就是金牌。假设你的数据保存在一个字符串data中，你所要做的就是

// Set the file media type appropriately
var blob = new Blob([ data ], { type: "image/png" });

var formData = new FormData();
formData.append("theFile", blob, "filename.png");

var xhr = new XMLHttpRequest();
xhr.open("POST", "/destination");
xhr.send(formData);
xhr.onload = function() {
    // ...
};

更新：如果您的客户端不支持 XHR2，有一种仅使用 AJAX 发送文件的方法，尽管它是 a bit complicated。

基本上，您必须模仿 multipart/form-data 请求，并手动构建请求正文的各个部分。不是很容易，但可行，并且应该适用于 IE6-9。

【讨论】：

Blob 的第二个参数应该是{ type: "image/png" }
如果我理解正确，文件将到达 $_POST，而不是 $_FILE。我正在寻找它到达 $_FILE 以便我们不必修改服务器代码。然而，这种方法似乎比我们的 base64 编码和通过 JSON 传输的替代策略更好。
@MarkKasson 不，当 File 或 Blob 对象为 appended 时，它将作为文件发送并由 php 处理。另请参阅this。

【解决方案2】：

不久前我有一个类似的问题需要注意，我无法通过 $_FILE 全局将文件发送到 PHP，但我们可以用 $_SERVER['HTTP_X_FILENAME']。我写了下面的JS函数。

function UploadFile(file) {
    var xhr = new XMLHttpRequest();
    if (xhr.upload && file.size <= $id("MAX_FILE_SIZE").value)
    {
        // start upload
        xhr.open("POST", $id("upload").action, true);
        xhr.setRequestHeader("X-FILENAME", file.name);
        xhr.onload = function(e) {
            if (this.status == 200) {
                ... Some processing script for returning messages
            }
        };
        xhr.send(file);
    }
}

在 PHP 端使用以下方法访问文件：

$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
if ($fn) {
    $file = "desired location/" . $fn;
    file_put_contents($file,file_get_contents('php://input'));
}

您需要将您的 JS 变量传递给 UploadFile 函数并为返回的数据编写一个处理程序。

【讨论】：

令人失望的是没有办法让它出现在 $_FILE 中——这正是我们希望实现的目标。

【解决方案3】：

完成MaxArt的答案

在 PHP 中接收数据的代码是：

$file = $_POST['theFile'];//sent from javascript
$filePath = "/your_destination_directory/filename.ext";

if(file_put_contents($filePath,$file))
{
    //OK
}else{
    //ERROR
}

【讨论】：

【解决方案4】：

如果您在客户端使用 jQuery，那么jQuery Form Plugin 也是通过 Ajax 上传文件的好选择，您可以通过 PHP 轻松获取$_FILE。这个插件还有一些额外的功能来显示文件上传的进度。

这里是插件的演示：http://malsup.com/jquery/form/progress3.html

【讨论】：

我可能是错的，但它似乎是用于上传存储在磁盘上的文件。我们的不是 - 它们存储在内存中的变量中，我不想将它们存储在文件中。