js form 图片上传

<form id="uploadForm">
    <input type="file" id="fileInput" name="fileInput" />
    <button type="submit">上传</button>
</form>
<progress id="progressBar" value="0" max="100"></progress>

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault();
    
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var progressBar = document.getElementById('progressBar');
    
    if (file) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);
        
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                progressBar.value = (event.loaded / event.total) * 100;
            }
        };
        
        xhr.onload = function() {
            if (xhr.status === 200) {
                console.log('上传成功');
            } else {
                console.log('上传失败');
            }
        };
        
        var formData = new FormData();
        formData.append('file', file);
        xhr.send(formData);
    }
});