我有以下代码:
<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/
任何帮助,将不胜感激。谢谢。
FileReader的事件对象对文件的详细信息比较苗条。在回调内部,您可以到达普通的File对象,该对象仍然具有所有文件元信息,例如名称,日期和大小。
您的代码只需要使用file
而不是e
$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+file.name+'</p>')
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句