利用JQuery的ajax请求实现文件上传

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <!-- 引入SweetAlert2插件，用于显示上传进度等提示信息 -->

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput">
    <button type="button" id="uploadButton">上传文件</button>
</form>

$(document).ready(function() {
    $('#uploadButton').click(function() {
        var file = $('#fileInput').get(0).files[0]; // 获取用户选择的文件

        // 创建FormData对象，用于构建文件上传的表单数据
        var formData = new FormData();
        formData.append('file', file);

        // 发送ajax请求进行文件上传
        $.ajax({
            url: '/upload', // 后端接收文件上传的API地址
            type: 'POST',
            data: formData,
            dataType: 'json',
            cache: false,
            processData: false,
            contentType: false,
            xhr: function() {
                // 创建用于显示上传进度的XMLHttpRequest对象
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        var percent = Math.round((e.loaded / e.total) * 100);
                        // 使用SweetAlert2插件显示上传进度
                        Swal.fire({
                            title: '文件上传中',
                            text: percent + '% 完成',
                            didOpen: () => {
                                Swal.showLoading()
                            }
                        });
                    }
                }, false);
                return xhr;
            },
            success: function(response) {
                // 文件上传成功后的处理逻辑
                Swal.fire('文件上传成功', response.message, 'success');
            },
            error: function(xhr, status, error) {
                // 文件上传失败后的处理逻辑
                Swal.fire('文件上传失败', xhr.responseText, 'error');
            }
        });
    });
});