如何从 Javascript FileReader 获取文件名？

Posted 2023-02-15

【中文标题】如何从 Javascript FileReader 获取文件名？

【英文标题】：How to get the filename from the Javascript FileReader?

【发布时间】：2014-08-06 08:40:43

【问题描述】：

我正在使用 javascript FileReader 在浏览器中加载图像：

e = e.originalEvent;
e.dataTransfer.dropEffect = 'copy';
this.documentFile = e.dataTransfer.files[0];

var reader = new FileReader();
reader.onloadend = function () 
    if (reader.result) 
        console.log(reader);
        $('#theImage').attr('src', reader.result);
    
;
reader.readAsDataURL(this.documentFile);

这很好用。我现在想获取图像的原始文件名，但我不知道如何浏览互联网我也找不到任何东西？

有人知道我如何通过 FileReader 获取文件名吗？欢迎所有提示！

【问题讨论】：

我认为 FileReader 没有这个名字。你是如何加载文件开始的？

@epascarello - 我正在使用文本区域上的拖放来加载文件。使用 Backbone，然后我使用该事件来获取 documentFile。我在原始问题中添加了 3 多行代码来展示我是如何做到的。这有什么想法吗？

也许这对你有帮助？ ***.com/questions/12546775/…

【参考方案1】：

这可能不是最好的解决方案，但它对我有用。

var reader = new FileReader();
reader.fileName = file.name // file came from a input file element. file = el.files[0];
reader.onload = function(readerEvt) 
    console.log(readerEvt.target.fileName);
;

不是最佳答案，而是一个可行的答案。

【讨论】：

如果您在文件上有一个数组，这种方式将不起作用，我认为最好使用***.com/questions/12546775/…上接受的答案

正如我所说，这不是最好的答案，而是一个可行的答案。此外，问题不是关于数组，而是关于获取文件名。我同意，另一页上的答案更适合阵列设置。 :)

【参考方案2】：

我刚刚遇到了同样的问题，我是这样解决的：

使用文件阅读器

 const reader = new FileReader();
 reader.readAsDataURL(event.target.files[0]); // event is from the html input
 console.log(event.target.files[0].name);

【参考方案3】：

我通过这种方式通过 FileReader 获得了文件名和文件大小

首先，阅读器是一个 javascript FILE API 规范，对于从光盘读取文件非常有用。

在您的示例中，文件由 readAsDataURL 读取。

reader.readAsDataURL(this.documentFile);
var name = this.documentFile.name;
var size = this.documentFile.size;

我尝试在我的网站上改用 this.files[0] 并很好地使用 jQuery 将名称和大小捕获到输入元素中。

 reader.readAsDataURL(this.files[0]);
 $("#nombre").val(this.files[0].name);
 $("#tamano").val(this.files[0].size);

【参考方案4】：

选择的答案会起作用，但我个人更喜欢防止将未知属性分配给现有对象。

我所做的是使用内置的Map 对象来存储FileReader 与其File 之间的连接。它工作得很好，因为Map 允许键是任何东西，甚至是对象。

考虑这个在window 上拖放的示例，其中可以同时拖放多个文件：

// We will store our FileReader to File connections here:
const files = new Map();

window.addEventListener('drop', e => 
    e.preventDefault();

    for (const file of e.dataTransfer.files) 
        const reader = new FileReader();

        files.set(reader, file);

        reader.addEventListener('load', e => 
            // Getting the File from our Map by the FileReader reference:
            const file = files.get(e.target);

            console.log(`The contents of $file.name:`);
            console.log(e.target.result);

            // We no longer need our File reference:
            files.delete(e.target);
        );

        reader.readAsText(file);
    
);

window.addEventListener('dragover', e => 
    e.preventDefault();
);

瞧，我们在不改变 FileReader 对象的情况下做到了！

【参考方案5】：

如果要将文件名改为变量：

var filename;
var reader = new FileReader();
reader.onloadend = function () 
    if (reader.result) 
        console.log(reader);
        $('#theImage').attr('src', reader.result);
        filename = reader.result;
    
;
reader.readAsDataURL(this.documentFile);

如果你想让它在函数中运行：

var reader = new FileReader();
reader.onloadend = function () 
    if (reader.result) 
        console.log(reader);
        $('#theImage').attr('src', reader.result);
        myfunctionafter(reader.result);
    
;
reader.readAsDataURL(this.documentFile);

如果你想在另一个函数中获取信息：

var reader = new FileReader();
var filename = reader.onloadend = function () 
    if (reader.result) 
        console.log(reader);
        $('#theImage').attr('src', reader.result);
        return reader.result;
    
;
reader.readAsDataURL(this.documentFile);

当您的 reader.onloadend 可能在您运行它的函数之前完成时，可能会出现问题。然后你应该做两个函数并触发 myfunctionafter(reader.result);从里面

或者你可以简单地获取 src 之后

var filename = $('#theImage').attr('src');

【讨论】：

不幸的是，alert(reader.result); 会导致以下结果：data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgG etc etc.。所以这不是文件名，而是文件的 base64 编码源。知道如何获取文件的文件名吗？