使用showOpenFilePicker选图后input文件数据为空的解决求助

问题场景 #

使用showOpenFilePicker获取用户选中的图片后，尝试手动将选中的图片赋值给input文件元素的files[0]，但input的文件数据始终为空，赋值操作未生效。

原始HTML代码 #

<div class="col-md-3 iniTpe">
    <div class="form-group">
        <label for="researchPhoto">Example file input</label>
        <input name="researchPhoto" onclick="Research.OpenFiles(event)" type="file" accept="image/*" class="form-control-file" id="researchPhoto">
    </div>
</div>  

原始JavaScript代码 #

OpenFiles: async function (event) {
    event.preventDefault();
    let files = await window.showOpenFilePicker({
        types: [
            {
                description: 'Image Files',
                accept: {
                    'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
                },
            },
        ],
        excludeAcceptAllOption: true,
        multiple: false,
    });
  
    let fileData = await files[0].getFile();

    document.getElementById("researchPhoto").files[0] = fileData;

    console.log(document.getElementById("researchPhoto").files[0]) // 输出null，不符合预期
}

解决方案 #

核心问题在于：input元素的files属性是只读的FileList对象，无法直接修改其中的单个文件项，必须通过创建新的FileList来替换原有的值。可以借助DataTransfer对象来实现：

1. 创建一个空的DataTransfer实例，它可以用来构建可操作的文件集合
2. 将获取到的fileData添加到DataTransfer的items中
3. 将DataTransfer的files属性赋值给input元素的files属性

修改后的JavaScript代码 #

OpenFiles: async function (event) {
    event.preventDefault();
    let files = await window.showOpenFilePicker({
        types: [
            {
                description: 'Image Files',
                accept: {
                    'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
                },
            },
        ],
        excludeAcceptAllOption: true,
        multiple: false,
    });
  
    let fileData = await files[0].getFile();

    // 使用DataTransfer创建新的FileList
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(fileData);
    // 替换input的files属性
    document.getElementById("researchPhoto").files = dataTransfer.files;

    console.log(document.getElementById("researchPhoto").files[0]) // 现在会输出正确的File对象
}

额外说明 #

• 如果需要支持多选图片，只需要循环遍历files数组，将每个文件都添加到dataTransfer.items中即可
• 保留event.preventDefault()是必须的，这样可以阻止input默认的文件选择弹窗，只使用showOpenFilePicker的弹窗

内容的提问来源于stack exchange，提问作者Batuhan Fındık