Как получить имя файла из Javascript FileReader?

Я использую 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? Все советы приветствуются!

Ответ 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);
};

Не лучший ответ, но рабочий.

Ответ 2

Я получил имя файла и размер файла через FileReader таким образом

Прежде всего, читатель - это спецификация JavaScript API FILE, которая так полезна для чтения файлов с диска.

В вашем примере файл читается 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);

Ответ 3

Если вы хотите, чтобы имя файла было переменной:

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