如何从Javascript文件读取器获取文件名？

我正在使用Javascript文件阅读器在浏览器中加载图像：

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);

这个很好用。我现在想得到图像的原始文件名，但我不知道怎么做，环顾互联网也找不到任何东西

---

有人知道如何通过文件阅读器获取文件名吗？欢迎所有提示

如果要将文件名设置为变量：

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);

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

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');

---

这可能不是最好的解决方案，但对我来说很有效

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);
};

---

这不是最好的答案，但很有效。

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

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

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

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

我尝试在我的站点上使用此.files[0]，并使用jQuery将名称和大小捕获到输入元素中

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

---

我刚刚遇到了同样的问题，下面是我如何解决的：

使用文件阅读器

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

---

选定的答案会起作用，但我个人更喜欢避免将未知属性指定给现有对象

我所做的是使用内置的

Map

对象来存储

FileReader

与其

文件之间的连接。它工作得很好，因为
Map
允许键是任何东西，甚至是一个对象

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

//我们将在此处存储文件读取器到文件的连接：
const files=新映射（）；
window.addEventListener（'drop'，e=>{
e、 预防默认值（）；
for（e.dataTransfer.files的常量文件）{
const reader=new FileReader（）；
文件集（读卡器，文件）；
reader.addEventListener（'load'，e=>{
//通过FileReader引用从地图中获取文件：
const file=files.get（e.target）；
log（`The contents of${file.name}:`）；
console.log（如target.result）；
//我们不再需要我们的文件参考：
文件。删除（如目标）；
});
reader.readAsText（文件）；
}
});
window.addEventListener（'dragover'，e=>{
e、 预防默认值（）；
});

瞧，我们没有改变
文件阅读器
对象就成功了
 我认为FileReader没有这个名字。您是如何开始加载文件的？@epascarello-我正在使用文本区域上的拖放加载文件。使用主干，然后使用事件获取文档文件。我在原来的问题中又添加了3行代码来说明我是如何做到这一点的。你有什么想法吗？也许这能帮你？不幸的是，
警报（reader.result）产生以下结果：
数据：图像/jpeg；base64、/9j/4AAQSKZJRGABAQAAAQABAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgG等
。因此，这不是文件名，而是文件的base64编码源。你知道我怎样才能得到文件的文件名吗？如果你在文件上有一个数组，这种方法就行不通了，我认为最好是在文件上使用公认的答案，正如我所说的，这不是最好的答案，而是可行的答案。另外，问题不是关于数组，而是关于获取文件名。我同意，另一页上的答案更适合阵列设置。：）