CakePHP 2 无法识别通过 ajax 上传的文件

Question

我在尝试使用带有 CakePHP 2.10.7 的 Ajax 将文件从视图传递到控制器时遇到了麻烦。

我的视图有以下输入：

<div id="staff-bg-image-container">
   <!-- Image uploading box exists here. -->
</div>
<input type="file" id="background_image_file" name="background_image_file" style="display:none;" accept="image/png, image/jpeg">

我的 JavaScript 看起来像这样：

$('#staff-bg-image-container').on('click', () => $('#background_image_file').trigger('click') );
$('#background_image_file').on('change', upload_background);

function upload_background()
{
    var file = this.files[0];    
    data = new FormData();
    data.append('file', file);

    $.ajax({
        url: '/staff/ajaxUploadBackgroundImage',
        type: 'POST',
        data: data,
        contentType: false,
        processData: false,
        cache: false,
        success: function(res){
            console.log(res);
        },
    });
}

但是当我将此请求发送到控制器时，$this->request->data 数组为空。我也尝试过使用 XMLHttpRequest 而不是 jQuery 来执行此操作，但结果是一样的。为什么 CakePHP 不能识别文件？

编辑：我可以使用 $_FILES 全局数组访问文件。但是，根据 CakePHP 文档，它应该出现在请求数据数组中。如果你能告诉我为什么不是这样，我将不胜感激。

Answer 1

在这种情况下我会做什么，首先您尝试仅使用一个 onchange 事件进行上传和保存。在这种情况下，我的方法是创建一个按钮，您将执行一个 onclick 事件以保存您刚刚上传的图像。因此，标记应该是这样的：

  <div id="staff-bg-image-container">
    <img src='/files/<?php echo $data['staff']['background_image_file']; ?>' id="bgimg" class="profile_image" width="450" alt="Image" />
 <!-- Image uploading box exists here. -->
  </div>
 <input type="file" id="background_image_file" name="background_image_file" 
   accept="image/png, image/jpeg"  onchange="readImage(this);"> 
  <button id="saveimg" style="margin-top: 10px;" class="btn-web-admin btn-save 
   upload_img"><?php echo 'Save Image'; ?>
    </button>

因此，您的 Javascript 应如下所示：

  function readImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();               
        reader.onload = function (e) {
                $('#background_image_file').attr('src',e.target.result); // 
               setting ur image here
               $('#saveimg').show();        
       };
       reader.readAsDataURL(input.files[0]);   // Read in the image file as a data URL.             }             
   }
}   

   $('#saveimg').on('click', function(e){
            e.preventDefault();
            var _validFileExtensions = [".jpg", ".jpeg", ".gif", ".png"];
            var validate_img = false;
            var sFileName = $('#background_image_file').val();
            for (var j = 0; j < _validFileExtensions.length; j++){
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    validate_img = true;
                    break;
                }
            }

            if(validate_img){
                var data = new FormData();
                var file = $('#background_image_file')files[0].;


                data.append('file');
                $.ajax({
                    type: "POST",
                    url: "/staff/ajaxUploadBackgroundImage",
                    data: data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(data) {
                        var img = new Image();

                         img.onload = function() {
                            var width = img.width;
                            var height = img.height;
                         }
                        img.src = ($('#bgimg')[0]).src;
                    },
                    error: function(a, b, c){
                        console.log('Select a valid image.');
                        console.log(a);
                        console.log(b);
                        console.log(c);
                        return false;
                    }
                });
            }else{
                console.log('Select a valid image.');
            }
    });

最后一个提示是，当您在控制器中使用 FormData 而不是 $this->request->data 时，我会给您一个提示，我建议您使用 $this->request->form 因为您可能正在使用 Ajax 请求上传图像。

     $dataimg = $this->request->form['file']; 
     $this->set('image', $dataimg);

我希望这可以帮助您了解它为什么不起作用。