Ajax отправка файла с формой ( yii2 и bootsrap)

Скрипт для формы (форма у меня лежит в модальном окне и в которое записывается ajax-ом)

$(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) {             
               
            
            }
        });
    });

$(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) {

}

});

форма

<form  method="post" action="" enctype="multipart/form-data">
</form>

1 2	<form method="post" action="" enctype="multipart/form-data"> </form>

запись для Yii2 формы будет такая

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

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>

<?= $form->field($model, 'image')->fileInput() ?>

.....

<?= 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 включены по умолчанию

processData: true; // по умолчанию

1	processData: true; // по умолчанию

По умолчанию, данные, переданные в параметр data в качестве объекта (с технической точки зрения, что-либо кроме строки), будут обработаны и преобразованы в строку запроса, для соответствия типу данных по умолчанию — «application/x-www-form-urlencoded; charset=UTF-8». Если необходимо отослать документ DOM или другие специфические данные, то установите данную опцию в false.

contentType: true; // по умолчанию

1	contentType: true; // по умолчанию

При отсылке данных на сервер, указывает тип данных. По умолчанию: «application/x-www-form-urlencoded», что подходит для большинства случаев.

Опубликовано в : ajax

Метки :

Условия обработки персональных данных

Ajax отправка файла с формой ( yii2 и bootsrap)

Только один комментарий

Цены

Последние видео админа

Последние комментарии

Свежие записи

Рубрики

Страницы

Архивы

Метки

Мета