如何從 Javascript FileReader 獲取文件名？

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

這很好用。 我現在想獲取圖像的原始文件名，但我不知道如何在 inte.net 上四處尋找我也找不到任何東西？

有人知道如何通過 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

我剛剛遇到了同樣的問題，這是我修復它的方法：

使用文件閱讀器

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

Answer 3

我以這種方式通過 FileReader 獲得了文件名和文件大小

首先，reader 是一個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 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

我嘗試了@Robo Robok 的解決方案，但無法在我的 Angular 應用程序中使用它。 以此為靈感，我想出了以下方法，想知道這是否是一種正確的方法。 我，我有點懷疑，因為每次上傳都有自己的 FileReader

    export class ImageFileUpload {
      imageData: any;
      imageName!: string;
      fileReader!: FileReader;
    }

  selectedFiles!: FileList | null;
  previews: Array<ImageFileUpload> = [];

uploadRenewals(event: any) { // event of html 
    const target = event.target as HTMLInputElement;
    this.selectedFiles = target.files;
   
    if (this.selectedFiles) {
      const numberOfFiles = this.selectedFiles.length;
      for (let i = 0; i < numberOfFiles; i++) {
        const currentSelectedFile = this.selectedFiles[i];

        const newImageFile = new ImageFileUpload();
        newImageFile.imageName = currentSelectedFile.name;
        newImageFile.fileReader = new FileReader();
       
        newImageFile.fileReader.onload = (e: any) => {
          newImageFile.imageData = e.target.result;
        };

        newImageFile.fileReader.readAsDataURL(currentSelectedFile);

        this.previews.push(newImageFile);
      }
    }

  }
}

HTML 頁

<input #fileInput (change)="uploadRenewals($event)" multiple type="file">

  <div class="slider">
    <div *ngFor="let preview of previews; let idx = index">
      <img [src]="preview.imageData" [alt]="preview.imageName">
    </div>    
  </div>

Answer 6

另一種方法是使用您自己想要的屬性修改FileReader() object 實例。 添加像reader.myOwnFileName這樣的鍵可以讓你在onload回調中訪問它。

const reader = new FileReader();

reader.onload = function() {

    console.log("Loaded file '" + reader.myOwnFileName + "' contents: ");
    console.log(reader.result); // output file contents of chosen file.

};

reader.readAsText(this.files[0]); // use readAsText(), readAsDataURL() or other method. 

// make your own key on the object instance:
reader.myOwnFileName = this.files[0].name;

Answer 7

如果要將文件名設為變量：

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