Торт PHP 2 не распознает файл, загруженный через ajax - PullRequest
Новая
       20

Торт PHP 2 не распознает файл, загруженный через ajax

0 голосов
/ 18 февраля 2020

Я ужасно пытаюсь передать файл из представления в контроллер, используя Ajax с Cake PHP 2.10.7.

Мое представление имеет следующий вход: 

<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, но результат был тот же. Почему Cake PHP не распознает файл?

Редактировать : я могу получить доступ к файлу с помощью массива $ _FILES globals. Однако согласно документации Cake PHP он должен присутствовать в массиве данных запроса. Буду признателен, если вы скажете мне, почему это не так.

1 Ответ

0 голосов
/ 19 февраля 2020

Что бы я сделал в этом случае, прежде всего вы пытаетесь загрузить и сохранить всего одно событие 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 поэтому должен go нравится: 

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

Я надеюсь, что может помочь вам понять, почему он не работает.

...