js实现图片上传预览及进度条

<input type="file" id="fileInput" accept="image/*" />
<img id="previewImage" src="#" alt="Image Preview" style="display:none;" />
<div id="progressBar" style="width: 0%; height: 20px; background-color: #4CAF50;"></div>

document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('previewImage').src = e.target.result;
            document.getElementById('previewImage').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
});

document.getElementById('fileInput').addEventListener('change', function(event) {
    var formData = new FormData();
    formData.append('file', event.target.files[0]);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total) * 100;
            document.getElementById('progressBar').style.width = percentComplete + '%';
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            alert('Upload successful!');
        } else {
            alert('Upload failed.');
        }
    };

    xhr.send(formData);
});