使用FormData、AJax和CakePHP上传文件

Question

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

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", "[e-mail]");

        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);
    }

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

您将看到，我还附加了一个username字段，只是为了测试帖子是否在控制器中使用了一些完整的数据。的确是。以下是记录$this->request->data数组的输出：

2014-06-18 17:51:41 Error: RequestsController::upload_files - Line 45
2014-06-18 17:51:41 Error: Array
(
    [username] => [e-mail]
)

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

FormData { append=append()}

有什么想法吗？？

Answer 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
        )

)