How to load images and serialized form into data asynchronously in yii/ajax/jquery?

Question

JavaScript

Good afternoon,

There is such a problem,

Without any problems, the data passed through the post through the form using an ajax request and processed on the server. But there was a need to asynchronously load the main image to the record and a group of images to this record ( CMultiFileUpload component).

My Chtml::submitButton button is outside the form widget. This is very necessary.

Previously, I just sent data from the form, I did not specify datatype and datacontent .

$.ajax({
...
data: $("#hotels-form").serialize()
...
});

Using this manual www.yiiframework.com/wiki/388/ajax-form-submiting-...

I decided to file asynchronous loading.

It suggests uploading images via formData:

var formData = new FormData($("#post-form")[0]);
data: formData,

Plus, there are three options:

cache: false,
        contentType: false,
        processData: false

1. How do I send form data along with formData
2. What should I do with the rest of the ajax parameters?
3. How can I send both the main image and the group of images to the server?

So far I'm tinkering with parameters, but I catch similar errors:
Uncaught TypeError: Illegal invocation

or I get into the error section of ajax without explanation and logs:

If:

dataType:'json',
data: $("#hotels-form").serialize(),

Or:

dataType:'json',
data: $("#hotels-form").serialize() + '&' + 'files='+ formData,

In this case, I lose the token:

dataType:'json',
data: $("#hotels-form").serialize() + formData,

Help me please!

Answer 1

Try the form plugin , it might help.