javascript FileReader 获取名称？答案

【问题标题】：javascript FileReader get name?javascript FileReader 获取名称？
【发布时间】：2016-02-10 16:18:19
【问题描述】：

我正在为我的网站编写一个简单的脚本来上传图片。我有一个由 div 点击触发的多文件输入<input type = 'file' name = 'files[]' id = 'hiddenFile' multiple>。当我对文件进行排队时，我希望能够删除一个。我知道我可以遍历$('#hiddenFile').val() 并拼接以获取名称，但我在确定文件名时遇到了问题。当我将文件分配给新的 img 容器时，如何获取名称？我试过console.log(f.name) 和一些变体，但它返回一个未定义的错误。这是我的脚本。我想我已经很接近了，但这是我正在学习的东西。谢谢！

function readURL(input) {
var files = $('#hiddenFile')[0].files; //where files would be the id of your multi file input
//or use document.getElementById('files').files;

    for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(f.name); //how can I get the 
                                 //file name here to add it to the image as an attribute?
            $("<img src = '"+e.target.result+"' class = 'addedImg'>").appendTo("#imgBox");
        };

        reader.readAsDataURL(f);

    }
}

$(document).ready(function(){
    $(document).on('click', '#addBtn', function(e){
        e.preventDefault();
        $('#hiddenFile').click();
    });
});

【问题讨论】：

您是否尝试过在调试器中添加断点并查看对象中有哪些属性
使用“this”引用，“f”一旦触发就没有定义，它是一个稍后触发的事件。或者将其他东西传递给该函数。无论您最终需要什么。

标签： javascript jquery

【解决方案1】：

尝试使用 change 事件，在 IIFE 中定义 f，将 title 属性值设置为 f.name

$(document).ready(function() {

  $(document).on('click', '#addBtn', function(e) {
    e.preventDefault();
    $('#hiddenFile').click();
  });

  $("#hiddenFile").change(function(event) {
    var files = this.files; 
    var i = 0,
      len = files.length;
    (function readFile(n) {
      var reader = new FileReader();
      var f = files[n];
      reader.onload = function(e) {
        console.log(f.name);
        $("<img src=" + e.target.result + " class=addedImg title=" + f.name + ">")
        .appendTo("#imgBox");
        // if `n` is less than `len` , 
        // call `readFile` with incremented `n` as parameter
        if (n < len -1) readFile(++n)
      };
      reader.readAsDataURL(f); // `f` : current `File` object
    }(i)); // `i` : `n` within immediately invoked function expression
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="addBtn">click</div>
<input type="file" style="display:none" id="hiddenFile" multiple />
<div id="imgBox"></div>

【讨论】：

太棒了。我想我很近但很远。我还有很多东西要学习，但这是一个很大的帮助。非常感谢！

【解决方案2】：

FileReader 对象本身无权访问文件名。当你在 for 循环中迭代文件列表时，你会得到文件名。

var reader = new FileReader();

reader.onload = function (e) {
    //update image src or something
};

for (var i = 0, f; f = files[i]; i++) {
    reader.readAsDataURL(f); //updates image src or something
    //additional method to do something with file name goes here
}

如果您真的想在 for 循环中使用一种方法来完成这两项操作，那么您可以将其全部封装在一个闭包中，就像 @ebidel 在他的回答中所做的那样 - Get filename after filereader asynchronously loaded a file#answer-12547471。

【讨论】：