html+ajax实现上传大文件功能

实现上传大文件功能可以采用前端html和ajax技术相结合的方式来实现。具体步骤如下：

1. 相关依赖库的引入

我们需要在html页面中引入jquery和fileupload插件，代码示例如下：

<!-- 引入jquery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入fileupload插件 -->
<link href="https://cdn.bootcss.com/blueimp-file-upload/9.12.6/css/jquery.fileupload.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/blueimp-file-upload/9.12.6/js/jquery.fileupload.min.js"></script>

2. html页面中定义上传文件表单

我们需要在html页面中定义一个form表单，用于上传文件，代码示例如下：

<form class="fileupload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" multiple>
    <button type="submit" class="btn btn-primary start">上传</button>
    <div class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>
</form>

3. ajax提交文件数据

我们采用ajax技术提交表单数据，代码示例如下：

$(function () {
    // 绑定上传按钮点击事件
    $('.fileupload').fileupload({
        dataType: 'json',
        // 上传请求成功处理函数
        done: function (e, data) {
            // 上传成功后的处理逻辑
        },
        // 上传请求失败处理函数
        fail: function (e, data) {
            // 上传失败后的处理逻辑
        },
        // 上传文件时处理进度条
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    });
});

我们还需在服务器端处理上传文件的逻辑，并在上传请求成功处理函数中处理响应数据，代码示例如下：

@RestController
public class UploadFileController {
    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        // 处理上传文件的逻辑
    }
}

示例1：上传文件到OSS

我们可以将上传的文件上传到阿里云OSS，代码示例如下：

@Service
public class OSSService {
    @Value("${aliyun.oss.bucketName}")
    private String bucketName;

    @Value("${aliyun.oss.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.accessKeyId}")
    private String accessKeyId;

    @Value("${aliyun.oss.accessKeySecret}")
    private String accessKeySecret;

    private OSSClient ossClient;

    @PostConstruct
    public void init() {
        ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
    }

    public String uploadFile(MultipartFile file) throws Exception {
        String fileName = file.getOriginalFilename();
        InputStream inputStream = file.getInputStream();
        ossClient.putObject(bucketName, fileName, inputStream);
        ossClient.shutdown();
        return "上传成功";
    }
}

@RestController
public class UploadFileController {
    @Autowired
    private OSSService ossService;

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        try {
            ossService.uploadFile(file);
            return "上传成功";
        } catch (Exception e) {
            return "上传失败";
        }
    }
}

示例2：限制上传文件大小

我们可以在前端限制上传文件的大小，代码示例如下：

<form class="fileupload" method="post" enctype="multipart/form-data">
    <input type="file" name="file" data-max-size="10485760" multiple>
    <button type="submit" class="btn btn-primary start">上传</button>
    <div class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>
</form>

在ajax提交表单数据时，我们可以在上传请求失败处理函数中处理上传文件超出大小的情况，代码示例如下：

$(function () {
    // 绑定上传按钮点击事件
    $('.fileupload').fileupload({
        dataType: 'json',
        // 上传请求成功处理函数
        done: function (e, data) {
            // 上传成功后的处理逻辑
        },
        // 上传请求失败处理函数
        fail: function (e, data) {
            if (data.jqXHR.responseJSON.errorCode == 'MAX_FILE_SIZE') {
                alert('上传文件不能超过10MB');
            } else {
                alert('上传文件失败');
            }
        },
        // 上传文件时处理进度条
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).on('fileuploadadd', function (e, data) {
        // 限制上传文件大小10MB
        var maxSize = $(this).find('[name=file]').data('max-size');
        if (data.originalFiles[0]['size'] && data.originalFiles[0]['size'] > maxSize) {
            data.originalFiles.pop();
            alert('上传文件不能超过10MB');
        }
    });
});

在服务器端，我们可以在业务处理函数中限制上传文件大小超出限制的情况，代码示例如下：

@RestController
public class UploadFileController {
    @Value("${upload.maxSize}")
    private long maxSize;

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        try {
            if (file.isEmpty()) {
                return "上传文件不能为空";
            }
            if (file.getSize() > maxSize) {
                return "上传文件不能超过10MB";
            }
            // 处理上传文件的逻辑
            return "上传成功";
        } catch (Exception e) {
            return "上传失败";
        }
    }
}

注意事项：

1. 在前端和服务器端都需要对上传文件大小做限制，以保证上传文件安全可靠；
2. 在大文件的上传过程中需要处理上传进度条，以给用户更好的体验。