用户登录

下面我们再去添加一个可以显示选择的文件数量的小徽章 … (# … html)

在这个替身按钮的右边,去添加一个小徽章 … 这里我用的是 Bootstrap 的 badge 类 … 它可以让这个 <span> 标签变成小徽章的样式 … 另外还有一个 pull-right … 它可以让这个小徽章靠右显示 …

<span class="badge pull-right"></span>

然后我们可以把选择的文件的数量作为这个 <span> 标签里面的内容 … (# fileapi.js)

在这个 displayFileInfo() 函数里面 … 添加一行代码 .. 先找到小徽章元素 …. 然后设置它的 innerHTML … 元素里面的内容 …

内容是 file 的 length 属性 …

// 显示文件数的小徽章
document.querySelector(".badge").innerHTML = file.length;

保存 … 回到浏览器 . 刷新 ..

选择文件 … 找到一些文件 … 打开 …

现在,使用 选择文件 这个替身按钮可以选择文件 … 所选的文件的数量会显示在这个小徽章里面 …

显示文件数量的小徽章《 HTML5:文件 API 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点