在Spring中使用ajax和jQuery上传文件而不使用FormData

时间:2014-02-25 11:19:14

标签: java jquery ajax spring jsp

我想使用ajax,jQuery和Spring表单在我的应用程序中上传excel文件。以下是我的代码。我能够使用@modelAttribute命中控制器,这只是一个具有一个Multipart文件属性的简单Java类,但当请求来到Controller时,FileUploadForm中的文件属性为null。任何人都可以建议我做错了什么。我在IE8中这样做,所以不能使用FormData。提前谢谢。

JSP

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var form = $('#myForm');
    form.find('#submitButton').click(function() {
        $.ajax({
            type : "POST",
            url : form.attr('action'),
            enctype : 'multipart/form-data',
            data : form.attr('modelAttribute'),
            success : function(data) {
                alert("Success"+data);
            },
            error : function(data) {
                alert("error");
            }
        }); 
    });
});

   </script>
 </head>
<body>
<form:form method="post" action="upload" id="myForm"
    modelAttribute="uploadForm" enctype="multipart/form-data">

    <table id="fileTable">
        <tr>
            <td><input name="file" id="uploadedFile" type="file"  /></td>
        </tr>
    </table>
    <br />
<!-- <button class="btn btn-primary" type="submit" value="Upload">
                                           Upload</button> -->
<input type="submit" class="btn btn-primary" id="submitButton" 
                                           value="Upload" />
</form:form>

以下是我的控制器代码。

控制器

  @RequestMapping(value = "/upload", method = RequestMethod.POST)
public String handleFileUpload(@ModelAttribute("uploadForm") FileUploadForm form,
              Model model) {
    MultipartFile file = form.getFile();
    String name = file.getOriginalFilename();
    FileSystemResource fsr = new FileSystemResource(name);
    StatusVO statusVO = service.loadAndProcessUploadedFile(fsr.getFile());
    model.addAttribute("status", statusVO);
    return "/common/message";
}

以下是FileUplaodForm类 的 FileUploadForm.java

import org.springframework.web.multipart.MultipartFile;

public class FileUploadForm {

    private MultipartFile file;

    public MultipartFile getFile() {
        return file;
    }

    public void setFile(MultipartFile file) {
        this.file = file;
    }
}

2 个答案:

答案 0 :(得分:0)

如果表单未通过提交按钮提交,只需尝试这样,

var form = $('#myForm');
form.find('#submitButton').click(function() {
    form.submit();      //This will submit your form.
});

希望这有帮助。

答案 1 :(得分:0)

嘿谢谢大家的快速反应,但我解决了。 Ajax根本不适用于文件上传。所以我删除了所有与ajax相关的代码并使其简单的表单提交。现在工作正常。