![](/img/trans.png)
[英]How can I get the filename from the FileReader function in a Multiple Input?
[英]How to get the filename from the 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);
这很好用。 我现在想获取图像的原始文件名,但我不知道如何在 inte.net 上四处寻找我也找不到任何东西?
有人知道如何通过 FileReader 获取文件名吗? 欢迎所有提示!
这可能不是最好的解决方案,但它对我有用。
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);
};
不是最好的答案,而是一个有效的答案。
我刚刚遇到了同样的问题,这是我修复它的方法:
使用文件阅读器
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]); // event is from the HTML input
console.log(event.target.files[0].name);
我以这种方式通过 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);
选定的答案会起作用,但我个人更喜欢防止将未知属性分配给现有对象。
我所做的是使用内置的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
对象的情况下做到了!
我尝试了@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>
另一种方法是使用您自己想要的属性修改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;
如果要将文件名设为变量:
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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.