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