Question

我使用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获取文件名吗？欢迎所有提示！

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

不是最好的答案，而是一个有效的答案。

Answer 2

我以这种方式通过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);

Answer 3

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

使用文件阅读器

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

Answer 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 对象！

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

如何从Javascript FileReader获取文件名？

5 个答案: