Question

您好我有一个输入文件，它接受多个文件，标签被赋予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);
     };
}

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

Answer 1

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

修改

将名称文件加载到FileReader中变得有点棘手！我提出了两种方法can see in this fiddle。

第一种方式似乎完全错误 - 将name属性添加到新的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]); } }

使用http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html建议的闭包（在底部）。类似的东西：

var input2 = document.getElementById('fileinput'); input2.addEventListener("change", readMultipleFiles, false); function readMultipleFiles(evt) { //Retrieve all the files from the FileList object var files = evt.target.files; if (files) { for (var i=0, f; f=files[i]; i++) { var r = new FileReader(); r.onload = (function(f) { return function(e) { // WOOHOO! var dataUri = e.target.result, img = document.createElement("img"); img.src = dataUri; document.body.appendChild(img); console.log( "Got the file.n" +"name: " + f.name + "\n" +"type: " + f.type + "\n" +"size: " + f.size + " bytes\n" ); }; })(f); r.readAsDataURL(f); } } else { alert("Failed to load files"); } }

关于MDN的好文章https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Answer 2

完美地试用此代码：

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

Answer 3

我为此做了一个工作，这里给出的例子是：

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

}

每次迭代读取器对象，然后我递增索引，使其索引到数组中的下一个罚款。

在javascript中获取文件名

3 个答案: