获取javascript中的文件名

嗨，我有一个输入文件，它接受多个文件，并且标记被赋予Id=fileToUpload 下面是代码：

var input = document.getElementById('filesToUpload');
for (var x = 0; x < input.files.length; x++) {
    oFReader = new FileReader();
    oFReader.readAsDataURL(input.files[x]);
    oFReader.onload = function (oFREvent) {
         imageSrc = oFREvent.target.result;
         console.log("source:" +imageSrc);
         name = oFREvent.target.name;
         console.log("name:" +name);
     };
}

var input=document.getElementById（'filesToUpload'）；
对于（var x=0；x

---

在这里，我可以得到图像的来源，但我不能得到文件的名称，这是选择上传。我的做法是正确的，或者这不是获取文件名的正确方法

请尝试完美运行此代码：

var input = document.getElementById('filesToUpload');
for (var x = 0; x < input.files.length; x++) {
    oFReader = new FileReader();
    oFReader.readAsDataURL(input.files[x]);
    oFReader.onload = function (oFREvent) {
         imageSrc = oFREvent.target.result;
         console.log("source:" +imageSrc);
         name = imageSrc.replace(/^.*[\\\/]/, '');
         console.log("name:" +name);
     };
}

var input=document.getElementById（'filesToUpload'）；
对于（var x=0；x

您希望从原始文件获取名称，而不是FileReader的onload事件的目标。没有

name

属性，

onload

事件的目标是文件读取器，而不是文件

编辑

将名称文件加载到FileReader中有点棘手！我想出了两种方法来帮助你

第一种方法似乎完全错误-将

名称

属性添加到新的FileReader（）实例中，然后通过

evt.target

访问它。无论如何都可以在FF和Chrome中使用

var input = document.getElementById('filesToUpload');
    input.addEventListener("change", soWrongButItSeemsToWork, false);

function soWrongButItSeemsToWork () {
    var filelist = this.files;

    for (var x = 0; x < filelist.length; x++) {
        oFReader = new FileReader();
        oFReader.name = filelist[x].name;
        console.log("name outside:", oFReader.name);
        oFReader.onload = function (oFREvent ) {
            imageSrc = oFREvent.target.result;
            console.log('name inside:', oFREvent.target.name);
            img = document.createElement("img");
            img.src = imageSrc;
            document.body.appendChild(img);
         };

        oFReader.readAsDataURL(filelist[x]);

    }
}

---

这里有一篇关于MDN的好文章

我为此做了一项工作，下面是给出的示例：

var input = document.getElementById('filesToUpload');
for (var x = 0; x < input.files.length; x++) {
oFReader = new FileReader();
oFReader.readAsDataURL(input.files[x]);
var index = 0;
oFReader.onload = function (oFREvent) {
     imageSrc = oFREvent.target.result;
     console.log("source:" +imageSrc);
     //name = oFREvent.target.name;
     name = input.files[index++].name;
     console.log("name:" +name);
 };

var input=document.getElementById（'filesToUpload'）；
对于（var x=0；x

}

---

每次迭代读卡器对象时，我都会增加索引，以便将其索引到数组中的下一个精细项。

否这不起作用。当imageSource中没有图像名称时，您试图从imageSource获取文件名的依据是什么？url或任何其他。请打印图像样本是的，这是我尝试过的。如果我尝试打印READER.onload=function（OFRENT）{console.log（“name:，name）；}中的名称，那么我只会得到最后一个文件名，而不是特定的文件名\n例如，我有3个文件1.jpg、2.jpg、3.jpg，然后3.jpg将被打印三次，以代替其他文件名。@user2823355获得。你给出的第二个解决方案工作得很好，我想，但我没有尝试过，因为我不在定义EventListener@user2823355嗯

oFReader.onload=函数（ofretent）{}

正在定义事件侦听器。“在

FileReader

对象的

oFReader

实例上侦听

onload

事件，并执行此匿名函数。”也许我误解了你。

var input = document.getElementById('filesToUpload');
for (var x = 0; x < input.files.length; x++) {
oFReader = new FileReader();
oFReader.readAsDataURL(input.files[x]);
var index = 0;
oFReader.onload = function (oFREvent) {
     imageSrc = oFREvent.target.result;
     console.log("source:" +imageSrc);
     //name = oFREvent.target.name;
     name = input.files[index++].name;
     console.log("name:" +name);
 };