ajax上传附件进度条取消上传

要实现使用AJAX上传文件并显示进度条，同时支持取消上传，你可以使用XMLHttpRequest对象来上传文件，监听progress事件以更新进度条，并监听abort事件以支持取消上传。以下是一个简单的示例代码：

HTML:

<progress id="uploadProgress" value="0" max="100"></progress>
<button id="uploadBtn">上传</button>
<button id="cancelBtn">取消上传</button>

JavaScript:

const uploadProgress = document.getElementById('uploadProgress');
const uploadBtn = document.getElementById('uploadBtn');
const cancelBtn = document.getElementById('cancelBtn');
 
let xhr;
 
uploadBtn.addEventListener('click', function() {
    const file = document.getElementById('fileInput').files[0]; // 获取文件
    if (file) {
        xhr = new XMLHttpRequest();
 
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                const percentComplete = (event.loaded / event.total) * 100;
                uploadProgress.value = percentComplete;
            }
        };
 
        xhr.open('POST', 'your-upload-url', true);
        const formData = new FormData();
        formData.append('file', file);
        xhr.send(formData);
    }
});
 
cancelBtn.addEventListener('click', function() {
    if (xhr) {
        xhr.abort(); // 取消上传
    }
});

在这个例子中，当用户点击上传按钮时，会创建一个新的XMLHttpRequest对象来上传文件。上传过程中，每次progress事件触发时，进度条都会更新。如果用户想取消上传，他们可以点击取消按钮，这将调用xhr.abort()方法，中断上传进程。