如何從多輸入中的FileReader函數中獲取文件名？

Question

我有以下代碼：

<input type="file" multiple='multiple'>
<div id="thumbs"></div>

<script type="text/javascript">
    $('input[type="file"]').change(function() {
    $('#thumbs').html('');
    $.each(this.files, function() {
    readURL(this);
 })
});

function readURL(file) {
    var reader = new FileReader();
    reader.onload = function(e) {
    $('#thumbs').append('<img src="' + e.target.result + '" width="20%">')
    $('#quantity').text(i)
  }
  reader.readAsDataURL(file);
}
</script>

這是一個多上傳輸入。 當我選擇“x”圖片時，它會為它們創建縮略圖。 這完全有效，但我想知道如何獲取文件名（如果圖片名為“sun.jpg”，我想得到“sun”），並將它們附加到圖片中。 我試過這個：

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+e.name+'</p>')

但是e.name是undefined 。

這是一切的小提琴： https ： //jsfiddle.net/ugs6rzqx/1/

任何幫助，將不勝感激。 謝謝。

Answer 1

有關該文件的詳細信息，FileReader的事件對象很少。 在回調內部，您可以訪問普通的File對象，該對象仍然具有名稱，日期和大小等所有文件元信息。

您的代碼只需要使用file而不是e

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+file.name+'</p>')

Answer 2

如果你只是想要這個名字：

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+file.name.split('.')[0]+'</p>')

工作小提琴： https ： //jsfiddle.net/robertrozas/ugs6rzqx/3/

Answer 3

采用

file.name

這是你的小提琴： https ： //jsfiddle.net/ugs6rzqx/2/