如何在CodeIgniter编辑页面展示已上传文件的文件名？

当然可以实现！原生的<input type="file">控件默认不会展示已上传的文件信息，不过我们可以通过添加一点额外的HTML、JS和PHP逻辑来搞定这个需求。下面是具体的修改方案：

1. 调整HTML结构，添加文件名显示元素 #

我们在上传控件旁边新增一个元素，用来展示已上传的文件名，同时保留原有隐藏字段存储文件路径：

<div class="form-group">
    <label class="col-sm-3 control-label" for="bill">Upload Proof</label>
    <div class="col-sm-9">
        <!-- 新增容器包裹上传控件和文件名显示 -->
        <div class="file-upload-wrapper">
            <input type="file" name="Customer_file" id="Customer_file" class="" />
            <!-- 用来显示已上传/选中的文件名 -->
            <span id="current-file-name" class="file-name-text">
                <?php 
                // 从文件路径中提取文件名，PHP直接输出
                if (!empty($data[0]->file_path)) {
                    echo basename($data[0]->file_path);
                }
                ?>
            </span>
        </div>
    </div>
    <div class="help-block with-errors pull-right"></div>
</div>
<!-- 保留隐藏字段，存储原文件路径 -->
<input type="text" value="<?php echo $data[0]->file_path ?? ''; ?>" name="file_path" id="file_path" hidden/>

2. 添加JavaScript处理新文件选择 #

当用户选择新文件时，我们需要更新显示的文件名，添加这段脚本：

// 获取DOM元素
const fileInput = document.getElementById('Customer_file');
const fileNameDisplay = document.getElementById('current-file-name');

// 监听文件选择事件
fileInput.addEventListener('change', function() {
    if (this.files.length > 0) {
        // 显示新选择的文件名
        fileNameDisplay.textContent = this.files[0].name;
    } else {
        // 如果取消选择，恢复显示原文件名（可选，根据需求调整）
        fileNameDisplay.textContent = '<?php echo basename($data[0]->file_path) ?? ''; ?>';
    }
});

3. 可选：添加CSS美化显示效果 #

为了让排版更协调，添加一点简单的样式：

.file-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.file-name-text {
    padding: 4px 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
    color: #495057;
}

关键逻辑说明 #

• PHP部分：通过basename()函数从完整文件路径中提取文件名，页面加载时直接渲染到页面上，用户打开编辑页面就能看到已上传的文件名称。
• JavaScript部分：监听文件上传控件的change事件，实时更新显示的文件名，保证用户选择新文件后能即时看到反馈。
• 隐藏字段：保留原有的file_path隐藏字段，这样如果用户没有选择新文件，表单提交时依然会携带原文件路径，后端可以判断是否需要保留原文件。

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