如何为HTML表单文件上传组件添加移除图标及移除功能

核心实现逻辑 #

• 在原有文件输入框外层增加定位容器，用于放置绝对定位的移除按钮，不破坏原有Bootstrap布局
• 移除按钮默认隐藏，仅当用户选中上传文件后才展示
• 点击移除按钮时清空文件输入框的选中值，回到未选择文件的初始状态
• 无需额外引入第三方图标库，使用原生符号即可实现移除图标效果，无额外依赖

代码实现 #

1. HTML结构改造 #

替换你原有的文件上传表单项代码即可，保留原有Bootstrap类名兼容现有样式：

<div class="form-group row">
    <label class="col-md-5 col-form-label">attachment</label>
    <div class="col-md-7">
        <div class="file-input-wrapper">
            <input type="file" class="form-control" id="file" name="file">
            <button type="button" class="remove-file-btn" aria-label="移除已选文件">&times;</button>
        </div>
        <br><br>
    </div>
</div>

2. 配套CSS样式 #

把这段样式加到你的全局样式文件里，适配原有form-control的尺寸：

.file-input-wrapper {
    position: relative;
}
.remove-file-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #dc3545;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: none;
    z-index: 5;
}
.remove-file-btn:hover {
    color: #bb2d3b;
}
.file-input-wrapper.has-file .remove-file-btn {
    display: block;
}
/* 给选中文件后的输入框加右侧内边距，避免文件名被移除按钮遮挡 */
.file-input-wrapper.has-file .form-control {
    padding-right: 40px;
}

3. 交互JS逻辑 #

把这段JS放到页面末尾，或者DOM加载完成的回调里即可生效：

// 获取DOM元素
const fileInput = document.getElementById('file');
const fileWrapper = fileInput.closest('.file-input-wrapper');
const removeBtn = fileWrapper.querySelector('.remove-file-btn');

// 监听文件选择事件
fileInput.addEventListener('change', function() {
    if (this.value) {
        // 有选中文件时显示移除按钮
        fileWrapper.classList.add('has-file');
    } else {
        fileWrapper.classList.remove('has-file');
    }
});

// 监听移除按钮点击事件
removeBtn.addEventListener('click', function() {
    // 清空文件输入框值
    fileInput.value = '';
    // 移除选中状态，隐藏移除按钮
    fileWrapper.classList.remove('has-file');
    // 触发change事件同步状态
    fileInput.dispatchEvent(new Event('change'));
});

效果说明 #

• 用户选中文件后，输入框右侧会出现红色的×移除图标
• 鼠标悬浮在移除图标上会有颜色加深的反馈
• 点击移除图标后，已选文件会被清空，移除图标自动隐藏，输入框回到初始状态
• 完全兼容原有Bootstrap表单样式，不会破坏现有布局

内容的提问来源于stack exchange，提问作者hotflix