如何为krajee fileinput文件上传组件添加键盘输入文件路径功能

核心前提说明 #

受浏览器安全沙箱限制，原生<input type="file">默认禁止JavaScript直接修改/设置文件路径，也无法根据输入的本地路径直接读取用户本地文件，以下方案可实现路径输入能力，适配不同使用场景。

具体实现步骤 #

1. 保留原有引入资源和DOM结构 #

原有你提供的CSS、JS引入和HTML结构不需要改动，只需新增初始化配置、事件监听和样式即可。

2. 新增初始化配置和事件监听代码 #

在原有资源引入后添加以下JS代码：

// 初始化fileinput插件
$("#fileId").fileinput({
    showUpload: false,
    showPreview: false,
    showCaption: true
}).on('fileloaded', function() {
    // 选择文件后默认将路径展示区设为可编辑
    $('.file-caption-name').attr('contenteditable', 'true');
});

// 点击路径展示区时自动开启编辑状态
$(document).on('click', '.file-caption', function() {
    const $captionName = $(this).find('.file-caption-name');
    $captionName.attr('contenteditable', 'true').focus();
});

// 输入完成失焦后处理输入的路径
$(document).on('blur', '.file-caption-name', function() {
    const inputPath = $(this).text().trim();
    if (!inputPath) return;

    // 场景A：输入为网络文件URL，可直接加载预览
    if (inputPath.startsWith('http') && /\.(jpg|jpeg|png|gif|webp)$/i.test(inputPath)) {
        $('#imgHeader').attr('src', inputPath);
        // 同步更新fileinput预览状态
        $("#fileId").fileinput('reset');
        $("#fileId").fileinput('initialPreview', [inputPath]);
        $("#fileId").fileinput('initialPreviewConfig', [{
            type: 'image',
            key: 1,
            showDelete: false
        }]);
    } 
    // 场景B：输入为本地文件路径，可存储路径值提交后端，或引导用户主动选择文件
    else {
        // 此处可自行将inputPath存入变量，后续随表单提交
        console.log('输入的本地文件路径：', inputPath);
        // 若需要读取该路径文件，可引导用户主动触发文件选择框，代码示例：
        // if(confirm('确认选择该路径文件？')) $('#fileId').click();
    }
});

3. 新增适配样式 #

添加以下CSS让可编辑区域的交互更自然：

.file-caption-name[contenteditable="true"] {
    cursor: text;
    outline: none;
    width: 100%;
    min-height: 20px;
}
/* 空值时显示占位提示 */
.file-caption-name[contenteditable="true"]:empty::before {
    content: "请输入文件路径或点击浏览选择文件";
    color: #adb5bd;
}

注意事项 #

• 本地文件路径输入后无法直接读取文件内容，属于浏览器安全限制，所有前端插件都无法绕过
• 输入的路径值可自行通过JS获取后提交到后端做对应处理
• 如果你的使用场景是服务端文件路径管理，可直接基于输入的路径和后端交互读取对应文件

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