js实现本地上传图片后实现预览与删除功能

在JavaScript中实现本地图片上传后的预览和删除功能，可以通过HTML5的FileReader API来实现。以下是一个简单的实现示例：

HTML部分：

<input type="file" id="image-upload" accept="image/*" />
<img id="image-preview" src="" alt="Image preview..." style="display: none;" />
<button id="delete-image">删除图片</button>

JavaScript部分：

document.getElementById('image-upload').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('image-preview').src = e.target.result;
        document.getElementById('image-preview').style.display = 'inline';
    };
    reader.readAsDataURL(file);
});
 
document.getElementById('delete-image').addEventListener('click', function() {
    document.getElementById('image-upload').value = null;
    document.getElementById('image-preview').src = '';
    document.getElementById('image-preview').style.display = 'none';
});

这段代码实现了以下功能：

1. 用户通过<input>选择图片文件后，使用FileReader读取文件并将其转换为DataURL。
2. 将读取到的DataURL设置为<img>的src属性，从而实现图片的预览。
3. 点击删除按钮后，清空文件输入的值，并隐藏图片预览，实现图片的删除。