如何从多输入中的 FileReader 函数获取文件名？答案

【问题标题】：How can I get the filename from the FileReader function in a Multiple Input?如何从多输入中的 FileReader 函数获取文件名？
【发布时间】：2016-02-02 20:08:49
【问题描述】：

我有以下代码：

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

任何帮助将不胜感激。谢谢。

【问题讨论】：

使用file.name,e是阅读器事件对象，不包含文件本身的任何信息...
是的@dandavis，你是对的！谢谢你。创建答案，以便我将其标记为有效。
已经在这里回答：stackoverflow.com/questions/12546775/…

标签： javascript jquery html multi-upload

【解决方案1】：

FileReader 的事件对象在有关文件的详细信息方面很薄弱。在回调中，您可以访问普通的 File 对象，它仍然包含所有文件元信息，如名称、日期和大小。

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

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

【讨论】：

【解决方案2】：

如果你只想要名字：

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

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

【讨论】：

【解决方案3】：

使用

file.name

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

【讨论】：