springmvc利用jquery.form插件异步上传文件示例

针对你的问题，我可以提供以下完整攻略，希望能够帮助你。

一、简介

在web应用中，文件上传功能是比较常见的。而在Spring MVC框架中，文件上传则可以通过SpringMVC提供的MultipartHttpServletRequest类来完成，但是这种方式需要整个页面提交才能上传文件，速度比较慢，因此在前端使用异步上传文件功能可以大幅提升用户体验。而jquery.form插件就是用来实现异步上传文件的一个开源插件，支持文件上传进度实时显示等功能，本次攻略就是要通过一个示例来演示如何实现springmvc利用jquery.form插件异步上传文件。

二、示例说明

1. maven依赖引入

在pom.xml中添加以下依赖：

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>

2. HTML页面部分代码

在HTML页面上添加一个文件上传的表单，代码如下：

<form id="uploadForm" method="POST" enctype="multipart/form-data">
  <input type="file" name="file" /><br/><br/>
  <input type="submit" value="上传文件" />
</form>

3. jquery.form插件引入及调用

在HTML页面上引入jquery.form插件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

通过以下代码调用jquery.form插件，实现异步上传文件的功能：

$(function(){
    $("#uploadForm").submit(function(){
        $(this).ajaxSubmit({
            type:"post",
            dataType:"json",
            url:"/upload",
            success:function(data){
                console.log(data);
                alert(data.msg);
            },
            error:function(xhr){
               console.log(xhr.responseText);
               alert("上传文件失败，请重试！");
            }
        });
        return false;
    });
})

4. Spring MVC后台代码

在Controller中实现文件上传功能的代码如下：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public Map<String,Object> upload(@RequestParam("file") MultipartFile[] files) throws IOException {
    Map<String,Object> result = new HashMap<>();
    try {
        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            File targetFile = new File("D:/upload", fileName);
            FileUtils.copyInputStreamToFile(file.getInputStream(), targetFile);
        }
        result.put("code", "0");
        result.put("msg", "上传文件成功！");
    } catch (Exception e) {
        result.put("code", "-1");
        result.put("msg", "上传文件失败！");
        e.printStackTrace();
    }
    return result;
}

三、总结

通过以上示例，我们可以很清晰的了解到SpringMVC利用jquery.form插件实现异步上传文件的方法。在实际应用中，也可以根据需求加以修改，实现更加重要的功能。希望这篇攻略能够对你有所帮助。