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

We have PHP code on a server that receives files into $_FILE and then stores them based on user/security considerations.

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

On the client, we can currently send the file to the server as-is or we would like to process the file locally (in memory in js in the browser) and then deliver the file to the server. We can POST the processed file to the server using JSON, however there are issues with that.

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

We would much prefer to send the contents of the client's javascript variable to the server to be received in $_FILE. (We cannot assume client will have the ability to save the file locally.) Do we have to imitate a FORM submission somehow?

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

How to we send a javascript variable to be received as a PHP $_FILE?

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

Thanks!

谢谢！

UPDATE Blob definitely appears to be the right direction, but we are noticing that the Blob size is coming out 50% larger than the file that goes in to it. The file in $_FILE is also 50% larger. We have tried overriding the file type at Blob creation, based on other posts such as BlobBuilder ruins binary data, however it hasn't fixed the 50% increase in size. We are setting the Blob file type based on the drag and drop file type we receive. For example, we upload a 900K PDF file. Type was something like 'application/pdf'. The resultant blob was like 1,400K. Also tried with PNG.

更新Blob肯定是正确的方向，但我们注意到Blob大小比输入它的文件大50％。 $ _FILE中的文件也大50％。我们已经尝试在Blob创建时覆盖文件类型，基于其他帖子，例如BlobBuilder废墟二进制数据，但是它没有修复50％的大小增加。我们根据收到的拖放文件类型设置Blob文件类型。例如，我们上传了一个900K的PDF文件。类型类似于'application / pdf'。得到的斑点像1,400K。也试过PNG。

4 个解决方案

#1

If the client supports Blob and XHR2 (FormData), then you're gold. Supposing that your data is kept in a string data, all you have to do is

如果客户端支持Blob和XHR2（FormData），那么你就是黄金。假设您的数据保存在字符串数据中，您只需要做的就是

// 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() {
    // ...
};

UPDATE: if your client doesn't support XHR2, there is a way to send files using AJAX only, although it's a bit complicated.

更新：如果您的客户端不支持XHR2，有一种方法只使用AJAX发送文件，虽然它有点复杂。

Basically, you have to mimic a multipart/form-data request, and manually build the parts of the body of the request. Not very easy, but feasible, and should work with IE6-9.

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

#2

I had a similar issue a while back one thing to note, I was not able to send the file to PHP via the $_FILE global, but we can do the exact same thing with the $_SERVER['HTTP_X_FILENAME']. I wrote the following JS function.

我有一个类似的问题，有一点需要注意，我无法通过$ _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);
    }
}

On the PHP side use the following to access the 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'));
}

You need to pass your JS variable into the UploadFile function and write a handler for the returning data.

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

#3

To complete the answer of MaxArt

完成MaxArt的答案

The code to receive the data in Php would be :

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

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

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

#4

If you are using jQuery on client side, then jQuery Form Plugin is also a good option to upload files through Ajax and you will easily get the $_FILE through PHP. This plugin also has some extra functionality to display progress on file upload.

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

Here is the demo of the plugin: http://malsup.com/jquery/form/progress3.html

以下是该插件的演示：http：//malsup.com/jquery/form/progress3.html

#1