javascript FileReader 获取名称？

Question

我正在为我的网站开发一个简单的脚本来上传图片。我有多个文件输入 <input type = 'file' name = 'files[]' id = 'hiddenFile' multiple>这是由 div 点击触发的。当我对文件进行排队时，我希望能够删除一个。我知道我可以遍历 $('#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();
    });
});

Answer 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>