如何从多输入中的 FileReader 函数获取文件名? [英] How can I get the filename from the FileReader function in a Multiple Input?

问题描述

我有以下代码:

<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")，并将它们附加到图片中.我试过这个:

This is a multiupload input. When I select 'x' pictures, it creates thumbnails for them. That works perfectly, but I want to know how can I get the files name (if a picture is named "sun.jpg", I want to get "sun"), and append them bellow to the picture. I've tried this:

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

但是e.name是undefined.

这里是所有东西的小提琴:https://jsfiddle.net/ugs6rzqx/1/

Here is a fiddle of everything: https://jsfiddle.net/ugs6rzqx/1/

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

Any help would be appreciated. Thanks.

推荐答案

FileReader 的事件对象在有关文件的详细信息方面非常有限.在回调中，您可以访问普通的 File 对象，该对象仍然包含名称、日期和大小等所有文件元信息.

FileReader's event object is slim on details about the file. Inside the callback you can reach the normal File object, which still has all the file meta information like name, date, and size.

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

Your code just needs to use file instead of e

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

这篇关于如何从多输入中的 FileReader 函数获取文件名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！