更换头像js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更换头像</title>
<script>
function previewImage(event) {
    var reader = new FileReader();
    reader.onload = function(){
        var output = document.getElementById('preview');
        output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
}

function uploadAvatar() {
    var formData = new FormData();
    formData.append('avatar', document.getElementById('avatar').files[0]);

    fetch('/upload-avatar', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('头像上传成功！');
        } else {
            alert('头像上传失败：' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('发生错误，请稍后再试。');
    });
}
</script>
</head>
<body>
<h1>更换头像</h1>
<input type="file" id="avatar" onchange="previewImage(event)">
<img id="preview" src="#" alt="头像预览" style="max-width: 200px;">
<button onclick="uploadAvatar()">上传头像</button>
</body>
</html>