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 событие, определяя f внутри IIFE, устанавливая значение 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>

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

И если вы действительно хотите иметь один метод, который делает эти две вещи в течение цикла, то вы можете обернуть все это в затворе, как @ebidel делает в своем ответе здесь - Get filename after filereader asynchronously loaded a file#answer-12547471.