SpringMVC结合ajaxfileupload实现文件无刷新上传代码

下面就来详细讲解一下“SpringMVC结合ajaxfileupload实现文件无刷新上传代码”的完整攻略：

准备工作

在进行具体的代码实现前，我们需要准备以下的开发环境和配置：

• 安装Maven；
• 在pom.xml文件中添加相关的依赖项；
• 创建SpringMVC项目；
• 配置SpringMVC拦截器和控制器；
• 引入ajaxfileupload插件。

代码实现

下面通过两个示例来详细讲解如何使用SpringMVC结合ajaxfileupload实现文件无刷新上传的代码。

示例1

这个示例主要是讲解如何在页面中添加上传文件的表单，然后通过ajaxfileupload实现文件的无刷新上传。

在页面中添加上传文件的表单

我们可以在页面中添加如下的代码段来创建上传文件的表单：

<form id="uploadForm" action="upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit" value="上传"/>
</form>

上述代码中，我们创建了一个id为“uploadForm”的表单，它的action属性值为“upload”，method属性值为“post”，enctype属性值为“multipart/form-data”。同时，我们在表单中添加了一个type属性为“file”的input标签，它的name属性值为“file”。

使用ajaxfileupload实现文件无刷新上传

我们可以在页面中引入ajaxfileupload插件来实现文件无刷新上传。我们可以在页面中添加如下的代码段引入ajaxfileupload插件：

<script type="text/javascript" src="<spring:url value='/js/jquery.ajaxfileupload.js'/>"></script>

上述代码中，我们使用了SpringMVC的标签“”来引入了ajaxfileupload插件。

接下来，我们可以在页面中添加如下的jQuery脚本来实现文件无刷新上传：

$(function() {
    $('#uploadForm input[type="submit"]').on('click', function(e) {
        e.preventDefault();

        $.ajaxFileUpload({
            url: 'upload',
            secureuri: false,
            fileElementId: 'file',
            dataType: 'json',
            success: function(data) {
                console.log(data);
            },
            error: function(data, status, e) {
                console.log(e);
            }
        });

        return false;
    });
});

上述代码中，我们使用了jQuery的ajaxFileUpload方法，将文件上传到了“upload”接口。在success方法中，我们可以获取到服务器返回的json格式的数据。

示例2

这个示例主要是讲解如何在返回数据时，使用@ResponseBody将数据以json格式返回给前端。

控制器中的代码实现

我们可以在控制器中添加如下的代码段，将上传的文件保存到一个指定的路径，并返回一个json格式的数据：

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public @ResponseBody String upload(MultipartHttpServletRequest request) throws IOException {

    MultipartFile file = request.getFile("file");
    String path = "D:/upload/";
    String fileName = file.getOriginalFilename();
    File targetFile = new File(path, fileName);
    if (!targetFile.exists()) {
        targetFile.mkdirs();
    }
    file.transferTo(targetFile);

    JSONObject jsonObj = new JSONObject();
    jsonObj.put("fileUrl", targetFile.getAbsolutePath());

    return jsonObj.toJSONString();
}

上述代码中，我们可以通过@RequestParam注解来获取上传的文件，并将上传的文件保存到一个指定的文件夹中。在保存完成后，我们使用JSONObject对象来构建一个json格式的数据。

在页面中获取返回的json数据

我们可以在前端页面中添加如下的代码段来获取服务器返回的json格式的数据：

success: function(data) {
    console.log(data);
    var jsonData = JSON.parse(data);
    var fileUrl = jsonData.fileUrl;
},

上述代码中，我们使用了JSON.parse方法将服务器返回的json数据转换成了一个js对象。然后，我们就可以在这个js对象中获取到指定字段的值，从而进行相应处理。

至此，我们使用SpringMVC结合ajaxfileupload实现文件无刷新上传代码的攻略就全部介绍完毕了。