纯JavaScript和HTML5的新特性来实现文件上传

// HTML结构
/*
<input type="file" id="fileInput">
<button οnclick="uploadFile()">上传文件</button>
<div id="progressBarContainer" style="display:none;">
    <div id="progressBar"></div>
    <div id="progressStatus"></div>
</div>
*/

// JavaScript代码
function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const progressBar = document.getElementById('progressBar');
    const progressStatus = document.getElementById('progressStatus');
    const progressBarContainer = document.getElementById('progressBarContainer');

    const file = fileInput.files[0];
    if (!file) {
        alert('请选择一个文件进行上传！');
        return;
    }

    const xhr = new XMLHttpRequest();
    const url = 'https://example.com/upload'; // 替换为实际的上传接口地址

    xhr.open('POST', url, true);

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            progressBar.style.width = percentComplete + '%';
            progressStatus.innerText = '已上传 ' + percentComplete.toFixed(2) + '%';
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            alert('文件上传成功！');
            progressBar.style.width = '0%';
            progressStatus.innerText = '';
            progressBarContainer.style.display = 'none';
        } else {
            alert('文件上传失败，请重试！');
        }
    };

    xhr.onerror = function() {
        alert('网络错误，文件上传失败！');
    };

    const formData = new FormData();
    formData.append('file', file);

    xhr.send(formData);

    progressBarContainer.style.display = 'block';
}

1. 文件选择与上传：通过HTML <input type="file"> 元素让用户选择要上传的文件，并通过JavaScript处理选定的文件。
2. 异步上传：使用XMLHttpRequest对象进行文件的异步上传，实现了前端向服务器发送文件数据的功能。
3. 上传进度条显示：利用xhr.upload.onprogress事件监听上传进度，动态更新页面上的进度条和上传进度文字提示。
4. 上传完成处理：在文件上传成功或失败时，显示相应的提示信息，帮助用户了解上传状态。