Скрипт для формы (форма у меня лежит в модальном окне и в которое записывается ajax-ом)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).on("submit", '#my-modal form', function (e) { e.preventDefault(); var form = $(this); var url=form.attr('action'); // объект формы(он в себя собирает все поля и файлы) var formData = new FormData(form[0]); // Значение нуль в скобках обязательно $.ajax({ url: url, type: "POST", //data: form.serialize(), processData: false, contentType: false, data: formData , success: function (result) { } }); }); |
форма
1 2 |
<form method="post" action="" enctype="multipart/form-data"> </form> |
запись для Yii2 формы будет такая
1 2 3 4 5 6 7 8 |
<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?> <?= $form->field($model, 'image')->fileInput() ?> ..... <div class="form-group"> <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?> </div> <?php ActiveForm::end(); ?> |
Эту же технологию можно использовать для любых ajax форм
Ниже немного теории
Объект FormData позволяет составить набор пар ключ/значение для отправки при помощи XMLHttpRequest. Это, в первую очередь, предназначено для отправки данных форм, но вы можете использовать этот объект независимо от форм, тогда передаваемые данные будут в том же формате, что и при обычной отправке формы с enctype=»multipart/form-data». Но при попытке отправки Объекта FormData через jquery $.ajax возникают проблемы, т.е. запрос придет, но файл вы не получите. Все это из-за 2 параметров которые в jquery ajax включены по умолчанию
1 |
processData: true; // по умолчанию |
По умолчанию, данные, переданные в параметр data в качестве объекта (с технической точки зрения, что-либо кроме строки), будут обработаны и преобразованы в строку запроса, для соответствия типу данных по умолчанию — «application/x-www-form-urlencoded; charset=UTF-8». Если необходимо отослать документ DOM или другие специфические данные, то установите данную опцию в false.
1 |
contentType: true; // по умолчанию |
При отсылке данных на сервер, указывает тип данных. По умолчанию: «application/x-www-form-urlencoded», что подходит для большинства случаев.
Обратная ссылка: bitrix прикрепить файл к письму- полная настройка. | ftask.ru — "Fair task" красивые задачи программиста /