如何实现选中图片后将文件选择图标替换为选中的图片？

1. 调整HTML结构 #

给相机图标添加ID方便后续JS操作，同时限制文件选择仅支持图片：

<label class="custom-file-upload">
    <input asp-for="imge1" name="imge1" type="file" accept="image/*" />
    <i id="upload-icon" class="fa fa-camera"></i>
</label>

2. 补充CSS样式 #

添加图片适配样式，确保选中的图片填满容器且保持比例：

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    height: 80px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--primary-color);
    overflow: hidden; /* 防止图片超出容器范围 */
}

.custom-file-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，填充整个容器 */
}

3. 添加JavaScript逻辑 #

监听文件选择事件，读取选中的图片并替换原相机图标：

const fileInput = document.querySelector('input[name="imge1"]');
const uploadIcon = document.getElementById('upload-icon');

fileInput.addEventListener('change', function() {
    const selectedFile = this.files[0];
    // 校验是否为图片文件
    if (selectedFile && selectedFile.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
            // 创建img元素并设置图片地址
            const previewImg = document.createElement('img');
            previewImg.src = e.target.result;
            // 替换相机图标
            uploadIcon.replaceWith(previewImg);
        };
        reader.readAsDataURL(selectedFile);
    }
});

关键说明 #

• accept="image/*"：限制文件选择框仅能选择图片类型文件，避免非图片文件干扰
• FileReader：将本地图片文件转换为Data URL，实现本地预览效果
• object-fit: cover：保证图片在容器内按比例显示，不会拉伸变形

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