Почему не отправляются файлы через AJAX Yii2?

Question

[shanik]

<?php $f = ActiveForm::begin(['id' => 'flora', 'action' => $flora->isNewRecord ? Url::base(true) . '/create-flora/add' : Yii::$app->request->url, 'options' => ['enctype' => 'multipart/form-data']]); ?>
...
    <?= $f->field($foto, 'file[]')->fileInput(['multiple' => true, 'class' => 'btn btn-success'])->label('Добавить фотографии'); ?>
        <?= Html::submitButton($flora->isNewRecord ? 'Добавить флору' : 'Изменить флору', ['id' => 'addFlora', 'class' => 'btn btn-success']) ?>

       <?php ActiveForm::end(); ?>

$(function () {
        $('#addFlora').click(function (e) {
            var $form = $('#flora');
            var formData = new FormData($form[0]);
            var id_taxon = 0;
            if ($('.table-striped > tbody > tr input:radio').is(':checked')) {
                id_taxon = $('.table-striped > tbody > tr input:radio').attr('data-key');
            }

           /* var file_data = $('#foto-file').prop('files')[0];
            var form_data = new FormData();
            form_data.append('file', file_data);
            console.log(file_data);*/

           /* $.each($('#foto-file')[0].files, function(i, file) {
                formData.append('Foto[file][]', file);
            }); */

            formData.append('Flora[taxon_id]',id_taxon);
            $.ajax({
                processData: false,  // Important!
                contentType: false,
                cache: false,
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: formData
            }).done(function (data) {
                console.log(data);
            }).fail(function () {
                console.log('fail');
            });
            //отмена действия по умолчанию для кнопки submit
            e.preventDefault();
        });
    });

Answer 1

[Дмитрий]

Добрый день.
А почему Вы решили, что они будут отправляться через ajax?
Что-бы это случилось - нужен совершенно другой подход.
Используйте класс FormData() и всё у Вас получится.
Вот небольшой пример:
jQuery

$(function(){
	function Testing(url, form){
	    var file = '';
		var formdata = new FormData(form[0]);
		formdata.forEach(function(item, i, arr){
			if(i == 'files'){
					formdata.append(item.name, item)
			}
		})

        $.ajax({
        	url: url,
        	type: 'POST',
        	processData: false,
            contentType: false,
        	data: formdata,
        	success: function(data){
        		console.log(data)
        	}
        })
	}

	$('#form-data').on('submit', function(e){
		e.preventDefault();
		Testing('upload.php', $(this))
	})
})

PHP
Ну а тут уж сами сделайте, с этим сложностей у Вас не возникнет.

P.S.
И, кстати, к yii2 загрузка файлов при помощи ajax не имеет никакого отношения. Хотя на yii2, хоть на чистом js + php надо использовать FormData()

Answer 2

[shanik]

formData.forEach(function(item, i, arr){
                console.log(item+' '+i+' '+arr);

возвращает это:


Как оттуда вытащить сами файлы, чтобы нормально заполняли массив:

[Foto] => Array
        (
            [file] => Array
                (
                    [0] => 
                )
        )

Comments

[Дмитрий]

Если Вы решили прокомментировать чей-то ответ, так и пишите в форме комментария под ответом, а не так, как Вы сделали.
Получается, что Вы дали ответ сами себе)))
Вот этот участок кода прекрасно вытаскивает нужные файлы

if(i == 'files'){
          formdata.append(item.name, item)
      }

[shanik]

slo_nik, Я хотел так сделать но че-то пошло не так )

этот участок вообще не отрабатывает:

if(i == 'files'){
          formdata.append(item.name, item)
      }

[Дмитрий]

shanik, не отрабатывает потому, что Вы просто скопировали, не подумав.

[Дмитрий]

shanik,сделайте вывод в консоль и посмотрите, что Вы имеете.

formdata.forEach(function(item, i, arr){
         console.log(item + ' - ' + i + ' - ' + arr)
    })

[shanik]

slo_nik, выше я показал это.

[Дмитрий]

shanik, код рабочий, что-то Вы не то делаете.
Если этот участок не отрабатывает, то что пишется в консоли браузера?

if(i == 'files'){
          formdata.append(item.name, item)
}

[shanik]

slo_nik,

Array
(
    [_csrf] => qnYUAkGxGhaYr3YRe_7_4yNXGlu2tyJGbZYQMUKQ5FfipBcbn9fgdih1408mNVhw==
    [Flora] => Array
        (
            [name] => имя
            [geo] => 57.52882177271644, 54.42373046875001
            [date] => 2017-09-14
            [description] => 
            [storage_id] => 1
            [users] => Array
                (
                    [0] => 1
                    [1] => 2
                )

            [user_id] => 1
            [taxon_id] => undefined
        )

    [Foto] => Array
        (
            [file] => Array
                (
                    [0] => 
                )

        )

)

Ошибок нет.

if(i == 'files'){
                    formData.append(item.name, item);
                    alert('ok');
                }

алерт не отрабатывает.

[Дмитрий]

shanik, Вы ознакомьтесь, для начала, с документацией, потом внимательно посмотрите на код, исправьте ошибку и у Вас всё заработает.
Я копировал свой рабочий код, никаких изменений под Ваши нужды я не делал. Вы вполне справитесь с этой задачей сами.
Читайте документацию(ссылку я дал) и исправляйте ошибку.

p.s. не занимайтесь бездумным копированием кода.