Ajax配合Spring实现文件上传功能代码

为了实现Ajax配合Spring实现文件上传功能，我们需要按照以下步骤进行操作：

1.前端代码

首先，在前端页面代码中，我们需要创建一个上传文件的表单和一个用来显示上传进度的进度条，代码示例如下：

<form id="upload" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <button type="submit" id="uploadBtn">上传</button>
</form>

<progress id="progressBar" value="0" max="100"></progress>

其中，我们使用了HTML5的表单属性enctype="multipart/form-data"来支持文件上传。稍后我们将使用jQuery通过AJAX来提交表单。我们还创建了一个progress元素，用来显示上传进度。

2. jQuery AJAX

接下来，我们需要使用jQuery实现AJAX文件上传。代码示例如下：

$(document).ready(function(){
    $('#uploadBtn').click(function(){
        var formData = new FormData($('#upload')[0]);
        $.ajax({
            url: '/uploadFile',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function(){
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(evt){
                    if(evt.lengthComputable){
                        var percent = evt.loaded / evt.total * 100;
                        $('#progressBar').val(percent);
                    }
                }, false);
                return xhr;
            },
            success: function(data){
                // 文件上传成功操作
            }
        });
    });
});

上述代码实现了通过Ajax提交表单到服务器的功能。其中，我们使用了FormData来构造表单数据，processData和contentType属性设置为false，使得jQuery不对数据进行处理，数据与服务器交互格式采用的是二进制数据。通过xhr函数，我们监听了上传进度，将进度条的value设置为上传进度的百分比。

3. Spring Controller

在服务器端，我们需要使用Spring框架来接收文件上传请求。其中，我们需要在Controller层中添加如下代码：

@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
@ResponseBody
public String handleFileUpload(@RequestParam("file") MultipartFile file){
    String fileName = file.getOriginalFilename();
    try{
        File uploadFile = new File("uploads/" + fileName);
        file.transferTo(uploadFile);
    } catch (Exception ex) {
        ex.printStackTrace();
        return "文件上传失败！";
    }

    return "文件上传成功！";
}

上述代码中，我们使用了@RequestParam注解来映射参数file为上传文件。MultipartFile是Spring封装的文件上传对象，我们通过它来获取上传文件的原始文件名。在try代码块中，我们将上传的文件保存到服务器硬盘中。

4. 测试

使用上述代码实现的文件上传功能，我们可以在我们的网站上上传任意文件并保存在服务器端。上传成功后，页面会显示文件上传结果。通过SpringMVC框架和jQuery的AJAX，实现了效率高、易于使用的文件上传功能。

下面是一个完整的Ajax配合Spring实现文件上传功能的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>Ajax配合Spring实现文件上传功能</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<form id="upload" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <button type="submit" id="uploadBtn">上传</button>
</form>

<progress id="progressBar" value="0" max="100"></progress>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
    $('#uploadBtn').click(function(){
        var formData = new FormData($('#upload')[0]);
        $.ajax({
            url: '/uploadFile',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function(){
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(evt){
                    if(evt.lengthComputable){
                        var percent = evt.loaded / evt.total * 100;
                        $('#progressBar').val(percent);
                    }
                }, false);
                return xhr;
            },
            success: function(data){
                alert(data);
            }
        });
    });
});
</script>

</body>
</html>

@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
@ResponseBody
public String handleFileUpload(@RequestParam("file") MultipartFile file){
    String fileName = file.getOriginalFilename();
    try{
        File uploadFile = new File("uploads/" + fileName);
        file.transferTo(uploadFile);
    } catch (Exception ex) {
        ex.printStackTrace();
        return "文件上传失败！";
    }

    return "文件上传成功！";
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax配合Spring实现文件上传功能代码 - Python技术站

Ajax配合Spring实现文件上传功能代码

1.前端代码

2. jQuery AJAX

3. Spring Controller

4. 测试

相关文章