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

时间:2016-02-02 20:08:50

标签: javascript jquery html5 multi-upload

我有以下代码:

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

这是一个多上传输入。当我选择&#39; x&#39;图片,它为他们创建缩略图。这完全有效,但我想知道如何获取文件名(如果图片名为&#34; sun.jpg&#34;,我想得到&#34; sun&#34;),并附加它们低于图片。我试过这个:

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

e.nameundefined

以下是一切:https://jsfiddle.net/ugs6rzqx/1/

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

3 个答案:

答案 0 :(得分:5)

FileReader的事件对象在文件细节方面很渺茫。 在回调内部,您可以访问普通的File对象,该对象仍然包含名称,日期和大小等所有文件元信息。

您的代码只需使用file代替e

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

答案 1 :(得分:4)

如果您只想要这个名字:

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

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

答案 2 :(得分:3)

使用

file.name

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