knockoutjs: отправка MultipartFile и других данных с помощью вызова ajax

Question

У меня есть эта простая форма:

<form id="form">
<ul>
    <li><label>Picture</label>
        <input id="upload" name="Picture" class="k-textbox" data-bind="value: picture" type="file"/>
    </li>
    <li>
        <label>Name</label>
        <input type="text" data-bind="value: name" id="name" class="k-textbox" />
    </li>
    <li>
        <label>Surname</label>
        <input type="text" data-bind="value: surname" id="surname" class="k-textbox" />
    </li>
</ul>
</form>

и моя модель представления:

var ViewModel = funtion(){
    this.picture = ko.observableArray();
    this.name = ko.observable();
    this.surname = ko.observable():
};

с нокаутом var picture содержит только путь к файлу, с кендо я могу взять файл с этим кодом:

var kendoUpload = $("#upload").kendoUpload({
    multiple: false,
});
var files = kendoUpload.data("kendoUpload").getFiles()[0];

Я хочу отправить все свои данные на контроллер Java. Я попытался больше контроллера... это последний три:

@RequestMapping(value = "addUser")
public String addUser(MultipartHttpServletRequest request, @RequestBody User user, @RequestParam("picture") MultipartFile[] uploadFiles)
        throws Exception {

    return "finish";
}

Пользователь - это простой класс с именем String, фамилией;

Это мой вызов ajax:

$.ajax({
url : "./user/addUser",
type : "POST",
dataType :'multipart/form-data',
contentType : "application/json",
useProxy: false,
data : data
 }).done(function(response) {
    console.log(response);
 });

Как правильно отправить мои данные и установить вызов ajax? Как загрузить файл через привязку данных нокаута, а не через kendoUpload?

Answer 1

Не уверен, что я полностью понимаю, но это то, что я делаю, когда мне нужно отправить больше данных, чем просто массив MultipartFile.

function submitUser(user) {

    // input where the files were uploaded to
    var filesToUpload = filesInput[0].files;

    // new form with our files and our user object
    var formData = new FormData();
    formData.append("productMedia", filesToUpload);
    formData.append("user", user);

    // ajax request
    var request = $.ajax({
        url: './user/addUser',
        data: formData,
        // Tell jQuery not to process data or not to worry about content-type
        // You *must* include these options in order to send MultipartFile objects
        cache: false,
        contentType: false,
        processData: false,
        method: 'POST',
        type: 'POST',
        success: function() {
            // do something
        },
        error: function () {
            // do something
        }
    });
}