Question

我有一个包含四个字段的表单，文件，名称，类型（只是一个字符串）和taskInstanceId。

<form>
   <table id="documentDetailsTable">
       <tr>
           <td>Document Type: </td>
           <td><select id="documentType" name="type"> </select></td>
       </tr>
       <tr>
           <td>
              Document Name:
           </td>
           <td>
              <input type="text" id="documentName" name="name"/>
           </td>
       </tr>
       <tr id="newFile">
           <td>
              Choose a file:
           </td>
           <td>
               <input type="file" name="file" />
           </td>
    </table>
    <input type="text" style="display: none;" name="taskInstanceId" id="taskInstanceId">

     <input id="uploadButton" value="Upload" type="submit"/>
     <input class="closeButton" id="closeNew" value="Close" type="button"/>
 </form>

如果我提交此表单，它将连接到我的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表单，我创建了一个新的Controller函数......

@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数据在发布之前看起来像这样......

enter image description here

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

enter image description here

Answer 1

好的，这似乎与您的解决方案有点不同，但我会通过以下方式进行。

据我所知，您希望使用ajax将数据上传到控制器并避免回发，然后返回一个字符串而不是字符串。我会这样做。

你的表格是：

<form> //Remove the method type as well as where the post should happen to ensure that you do not have to prevent default behavior
   <table id="documentDetailsTable">
       <tr>
           <td>Document Type: </td>
           <td><select id="documentType" name="type"> </select></td>
       </tr>
       <tr>
           <td>
              Document Name:
           </td>
           <td>
              <input type="text" id="documentName" name="name"/>
           </td>
       </tr>
       <tr id="newFile">
           <td>
              Choose a file:
           </td>
           <td>
               <input type="file" name="file" />
           </td>
    </table>
    <input type="text" style="display: none;" name="taskInstanceId" id="taskInstanceId">

     <input id="uploadButton" value="Upload" onclick('uploadFiles()')/> //Add //the event to your submit button and remove the submit from itself
     <input class="closeButton" id="closeNew" value="Close" type="button"/>
 </form>

你的JQuery：

//Stays the same I would suggest using a object type and then stringify it as follows
function uploadFiles(event)
{
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening

// START A LOADING SPINNER HERE

// Create a formdata object and add the files
//var data = new FormData();
//.each(files, function (key, value)
//{
//    data.append(key, value);
//});
//data.append('documentName', $("#documentName").val());
//data.append('documentType', $("#documentType").val());
//data.append('taskInstanceId', $("#taskInstanceId").val());

// Create a objectobject and add the files
var data;
data = {
    documentName:$("#documentName").val(),
    documentType:$("#documentType").val(),
    taskInstanceId:$("#taskInstanceId").val(),
    uploadedfiles: files
}
var json = JSON.stringify(data);
$.ajax({
    url: '/SafeSiteLive/formTask2.do',
    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
    }
});
}

在您的控制器中：

当您使用MVC时，请使用模型，因为它是捕获参数的正确方式。

public String handleFormTaskUpload2(UploadedFile mynewUpload )
{
//rest of code here
}

您的模型将会看到这个。

public class UploadedFile
{
   public string documentName{get;set}
   public string documentType{get;set}
   public string taskInstanceId{get;set}
   prop List<byte[]> files {get;set}
}

希望这有帮助，如果您仍然不理解，请告诉我

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

1 个答案: