10.1 FileList 对象与 File 对象

FileList 对象与 File 对象

FileList 对象表示用户的选择列表,在之前的版本中 File 控件只允许放置一个控件,而在 HTML5 中我们可以允许同时放置多个文件。控件内的用户选择的每个文件都是一个 File 对象,FileList 是管理这些文件的一个列表,它也是一个对象。 我们在代码中看一下使用方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script>
        function showFileName () {
            var file;
            for (var i=0; i< document.getElementById("file").files.length; i++) {
                file = document.getElementById("file").files[i];
                console.log(file.name);
            }
        }
    </script>
</head>
<body>
    <input type="file" id="file" multiple>
    <input type="button" onclick="showFileName()" value="文件上传">
</body>
</html>
看一下效果:

图片说明

点击选择文件,然后文件上传,我们就在控制台里面看到了打印的文件名字。如果上传多个文件:

图片说明

会显示出选择了六个文件,并循环打印出文件名称。意味着我们现在可以正常的上传多个文件,这就是最简单的使用。

全部评论

相关推荐

用微笑面对困难:只要你保证项目和获奖都是真的就行尤其是“对战,总负责人”啊这些套职,基本上队员,打杂的都这么写
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务