js原生图片上传

<input type="file" id="imageUpload" accept="image/*">
<img id="preview" src="" alt="Image Preview" style="max-width: 300px; display: none;">
<button id="uploadButton">上传图片</button>

<script>
document.getElementById('imageUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('preview').src = e.target.result;
        document.getElementById('preview').style.display = 'block';
    };
    reader.readAsDataURL(file);
});

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('imageUpload');
    const file = fileInput.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('image', file);

        fetch('/upload', { // 假设'/upload'是服务器上的上传接口
            method: 'POST',
            body: formData
        }).then(response => response.json())
          .then(data => console.log('Success:', data))
          .catch(error => console.error('Error:', error));
    }
});
</script>