javascript - 如何检测不同的 File 对象引用同一个文件？

Question

<input id='f' name='f' multiple />

我允许用户选择多个文件(来自不同文件夹)进行上传。我按照描述构建了所选文件列表 here .基本上，所选文件的列表在 INPUT 控件之外进行维护，并在提交时塞回 f.files。

每次用户选择一个文件时，所选文件的列表都是从 f.files 数组中的 File 对象构建的。

到目前为止，这很好用，除了我无法检测到所选的重复文件。 f.files 只包含文件名，不包含完整路径。

我在 File 对象上应用了 URL.createObjectURL，但每次都是不同的 url，即使是同一个文件也是如此。

(在 Chrome 中，如果连续选择同一个文件，上传控件将不会触发 change 事件。但这对我来说还不够，因为用户可以选择文件 A，然后文件 B，然后再次文件 A。)

如何识别 File 对象中的重复文件？

Answer 1

您可以使用 FileReader.readAsDataURL()读取每个文件的内容。

然后您可以将文件内容与每个文件的其他属性进行比较，包括 File.lastModified , File.name , File.size , 和 File.type以确定文件是否重复。

完整示例:

const file_input = document.getElementById( 'f' );

file_input.addEventListener( 'change', () =>
{
    const file_compare = [];
    
    Array.from( file_input.files ).forEach( file =>
    {
        const file_reader = new FileReader();
        
        file_reader.readAsDataURL( file );
        
        file_reader.addEventListener( 'load', () =>
        {
            const file_exists = file_compare.find( existing_file =>
                
                   existing_file.lastModified === file.lastModified
                && existing_file.name         === file.name
                && existing_file.size         === file.size
                && existing_file.type         === file.type
                && existing_file.content      === file_reader.result
                
            ) !== undefined;
            
            if ( file_exists )
            {
                console.log( 'Error:', file.name, 'is a duplicate file.' );
            }
            
            else
            {
                file_compare.push(
                {
                    'lastModified' : file.lastModified,
                    'name'         : file.name,
                    'size'         : file.size,
                    'type'         : file.type,
                    'content'      : file_reader.result
                });
            }
        });
    });
});

<input id="f" name="f" type="file" multiple />

Note: If you are dealing with very large files, you can limit the comparisons to File.lastModified, File.name, File.size, and File.type as a performance enhancer.