ajax提交数据至控制器,如何使用ajax提交表单并上传文件到弹簧控制器？

我有一个表单，其中包含四个字段，文件，名称，类型(只是一个字符串)和taskInstanceId。如何使用ajax提交表单并上传文件到弹簧控制器？

Document Type:
Document Name:
Choose a file:

如果我提交这个表单，它将连接到我的FileUploadController并且文件将被上传。

@RequestMapping(value = "/formTask.do", method = RequestMethod.POST)

public ModelAndView handleFormTaskUpload(@RequestParam("name") String name,

@RequestParam("type") String type,

@RequestParam("file") MultipartFile file,

@RequestParam("taskInstanceId") int taskInstanceId)...//rest of the code

现在我想使用jQuery/JSON而不是提交此表，这样我可以表明这个页面上的返回一个字符串，指示上传成功，然后显示一个对话框。 (我不想返回一个新的ModelAndView)。

因此，使用相同的HTML表单创建一个新的控制器功能...

@RequestMapping(value = "/formTask2.json", method = RequestMethod.POST)

public String handleFormTaskUpload2(UploadTaskDocument myNewUpload)).../rest of the code

现在我想提交上述使用jQuery形式。我的尝试在这里。

每次更改文件时都会调用此函数。

function prepareUpload(event)

{

files = event.target.files;

}

而且这个在表单提交时被调用。

function uploadFiles(event)

{

event.stopPropagation(); // Stop stuff happening

event.preventDefault(); // Totally stop stuff happening

var data;

data = {

documentName: $("#documentName").val(),

documentType: $("#documentType").val(),

taskInstanceId: selectedTaskInstanceId,

uploadedfiles: files

};

var json = JSON.stringify(data);

$.ajax({

url: '/SafeSiteLive/formTask2.json',

type: 'POST',

data: json,

cache: false,

dataType: 'json',

processData: false, // Don't process the files

contentType: false, // Set content type to false as jQuery will tell the server its a query string request

success: function (data, textStatus, jqXHR)

{

if (typeof data.error === 'undefined')

{

// Success so call function to process the form

//submitForm(event, data);

}

else

{

// Handle errors here

console.log('ERRORS: ' + data.error);

}

},

error: function (jqXHR, textStatus, errorThrown)

{

// Handle errors here

console.log('ERRORS: ' + textStatus);

// STOP LOADING SPINNER

}

});

}

它发布之前JSON数据看起来像这样...

但是，一旦它到达服务器一切都是空...

2015-06-24

OneTwo

+1

是的，看起来还好，除了在'jQuery.ajax'通话的研制成功情况下，你'submitForm'。不知道“submitForm”的作用是什么，但它不能再提交表单了，因为你已经用ajax请求发送了数据。在成功案例中，如果处理了表单数据并且您已从服务器获得成功响应，则调用应执行的操作。 –

+0

忽略这一点，我只是没有编码的阶段呢。 我现在遇到的问题是，当我尝试提交ajax时出现404错误，我不知道为什么？ –