Filelist - 文件列表

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Filelist 表示的就是文件对象的列表。 使用 file 类型的 input 表单元素 ,也就是选择文件表单元素... 或者 drag and drop,拖放的方式 ,可以去引用一个文件的列表。

在这个文档里面有一个表单,叫做 upload,它的里面只有一个表单元素,fileselect,它是一个 file 类型的 input 元素,用户可以使用它去选择存储在用户本地上的文件。

在这个元素上,我添加了一个 multiple 的属性。这样这个选择文件的表单元素可以同时选择多个文件。

你可以把这个文档放在你的 Web 服务器上,然后用浏览器打开这个文件。

下面我们先在控制台上演示一下 … command + alt + J

输入 document.forms … 可以得到当前这个文档里面的所有的表单 …

这些表单会放在一个数组里面 … 因为这个文档里面只有一个表单 … 所以这个上传文件的表单是这个数组里面的唯一的表单 …

document.forms

访问这个表单可以使用表单的名称 … 或者表单在数组里面的索引号 … 第一个表单的索引号是 0 … 然后往下排 …

document.forms["upload"]

想要得到表单里面的表单元素 … 可以这样 …

document.forms["upload"]["fileselect"]

因为表单里面的所有的元素也会在一个数组里 … 所以这里使用元素的名称 … 可以得到这个表单元素 … 这里我们得到的就是名称是 fileselect 的表单元素,也就是这个用户选择文件的表单元素。

使用这个 fileselect 选择的文件,会放在 files 这个对象里面 … 这个对象就是 filelist … 文件的列表。

document.forms["upload"]["fileselect"].files

filelist 有一个 length 属性,还有一个 item 方法 … length 属性就是文件列表里的文件的数量 … 因为还没有选择文件,所以这个 length 属性的值是 0 …

使用 item() 方法,加上文件的索引号,可以得到在文件列表里的对应的文件 …

点击 选择文件 … 浏览到本地上的一个文件 .. 现在文件的列表里,就会包含刚才所选择的文件了 … (document.forms["upload"]["fileselect"].files)

现在文件列表里面有一个文件 … 文件的索引号是从 0 开始的 … 然后是代表这个文件的 File …

file 类型的 input 也可以选择多个文件 .. 选择文件 … 这次我们多选择几个文件(#3) …

document.forms["upload"]["fileselect"].files

现在文件列表里面会有三个文件, 文件 0 … 文件 1 …. 文件 2 … 我们可以去访问一下这个文件列表的 length 属性 ...

得到的结果是 3 ... 表示这个文件列表里,现在包含三个文件 ...

document.forms["upload"]["fileselect"].files.length

Filelist - 文件列表《 HTML5:文件 API 》

统计

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

社会化网络

关于

微信订阅号

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