javascript - 使用input多个文件上传,怎么获取选择的文件?并把这些文件放在页面上显示

查看:80
本文介绍了javascript - 使用input多个文件上传,怎么获取选择的文件?并把这些文件放在页面上显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

<input id="fileInput" type="file" ref="file" multiple="multiple" />

使用multiple可以多个文件选择.但是怎么获致到这些文件的文件名,大小等这些信息,并把它们显示在页面上?

谢谢高手。

解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="file" multiple="multiple" id="test">
    <ul id='content'></ul>
</body>
<script>
var test = document.getElementById('test');
test.addEventListener('change', function() {
    var t_files = this.files;
    console.log(t_files);
    var str = '';
    for (var i = 0, len = t_files.length; i < len; i++) {
        console.log(t_files[i]);
        str += '<li>名称:' + t_files[i].name + '大小' + t_files[i].size / 1024 + 'KB</li>';
    };
    document.getElementById('content').innerHTML = str;
}, false);
</script>

</html>

这篇关于javascript - 使用input多个文件上传,怎么获取选择的文件?并把这些文件放在页面上显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆