使用 FormData、AJax 和 CakePHP 上传文件答案

【问题标题】：Uploading files using FormData, AJax and CakePHP使用 FormData、AJax 和 CakePHP 上传文件
【发布时间】：2014-08-09 01:07:33
【问题描述】：

好的，总而言之，我正在尝试使用FormData 和CakePHP 表单通过ajax 上传单个文件。问题是试图通过在控制器中记录 $this->request->data 错误来捕获数据会返回一个空文件数组。

所以，我已经使用 CakePHP 的助手设置了我的表单。但它的结构并不真正相关。使用的 javascript 将输出我们需要的任何调试。

所以这是设置。我有一个名为 RequestsController 的控制器，我的视图名称/功能是 upload_files。

这段 javascript 代码如下所示。注意，当文件输入元素的值发生变化时（即，一旦他们选择了要上传的文件）就会调用它

plugin.fileUpload = function(el)
    {
        el = $(el);

        form = el.closest('form');

        var files = el.get(0).files;

        console.log(files.length)

        var formData = new FormData();

        for (var i = 0; i < files.length; i++) 
        {
            var file = files[i];

            console.log(file);

            formData.append('files[]', file, file.name);
        }

        formData.append("username", "blablabl@gmail.com");

        var xhr = new XMLHttpRequest();

        xhr.open('POST', form.attr('action'), true);

        xhr.onload = function () {
            if (xhr.status === 200) {
                toastr.success('Successfully loaded');
            } 
            else 
            {
                alert('An error occurred!');
            }
        };

        xhr.send(formData);

        console.log(files);
        console.log(formData);
    }

请原谅所有控制台日志。目的是为了显示输出和调试。

您会看到我还附加了一个用户名字段，只是为了测试帖子是否将一些数据完整地发送到控制器。真的是。这是记录 $this->request->data 数组的输出：

2014-06-18 17:51:41 Error: RequestsController::upload_files - Line 45
2014-06-18 17:51:41 Error: Array
(
    [username] => blablabl@gmail.com
)

如您所见，用户名字段通过但不是文件。

我还将 JS 中的文件变量记录到控制台，看起来很棒。在 Firebug 中它看起来像这样：

 FileList { 0=File, length=1, item=item(), more...}

将 FormData 变量记录到控制台如下所示：

FormData { append=append()}

唉，FormData 输出中没有任何内容表明文件正在进入 FormData 对象。

有什么想法吗？？

【问题讨论】：

标签： ajax cakephp-2.0 form-data

【解决方案1】：

啊，这绝对是个问题

通过控制器中的 FormData 访问上传的文件就像通过任何表单提交访问任何 PHP 脚本中的文件一样。

看来，为了让我操作这些文件，我需要使用普通的 $_FILES 变量来访问它们。

所以，登录我的控制器现在看起来像这样：

function upload_files()
{
    if($this->request->is('post'))
    {
        CakeLog::write('error', print_r($_FILES, true));
    }
}

我们得到了一个漂亮、健康的文件数组，如下所示：

2014-06-18 22:13:29 Error: Array
(
    [files] => Array
        (
            [name] => ReadMe.txt
            [type] => text/plain
            [tmp_name] => /tmp/phpOUTn8l
            [error] => 0
            [size] => 3627
        )

)

【讨论】：