tengo este sencillo formulario:
<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>y mi modelo de vista:
var ViewModel = funtion(){ this.picture = ko.observableArray(); this.name = ko.observable(); this.surname = ko.observable(): }; con knockout, la var picture contiene solo la ruta del archivo, con kendo puedo tomar el archivo con este código:
var kendoUpload = $("#upload").kendoUpload({ multiple: false, }); var files = kendoUpload.data("kendoUpload").getFiles()[0];Quiero enviar todos mis datos a un controlador Java. He probado más controladores... este es el último tri:
@RequestMapping(value = "addUser") public String addUser(MultipartHttpServletRequest request, @RequestBody User user, @RequestParam("picture") MultipartFile[] uploadFiles) throws Exception { return "finish"; }El usuario es una clase simple con nombre de cadena, apellido;
Esta es mi llamada ajax:
$.ajax({ url : "./user/addUser", type : "POST", dataType :'multipart/form-data', contentType : "application/json", useProxy: false, data : data }).done(function(response) { console.log(response); });¿Cuál es la forma correcta de enviar mis datos y configurar la llamada ajax? ¿Cómo puedo cargar el archivo a través del enlace de datos de knockout y no mediante kendoUpload?
No estoy seguro si entiendo totalmente, pero esto es lo que hago cuando necesito enviar más datos que solo la matriz 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 } }); }