更新时间:2022-08-17 来源:黑马程序员 浏览量:
由于Web环境的特殊性,为了考虑文件安全问题,浏览器不允许JavaScript直接访问文件系统,但可以通过file类型的input元素或者拖放的方式选择文件操作。
<input type="file" id="thisFile"/>
File表单可以让用户选取一个或者多个文件(multiple属性),通过FileAPI,可在用户选择文件后访问到代表了所选文件列表的FileList对象,FileList对象是一个类数组的对象,其中包含着一个或多个File对象。如果没有multiple属性或者用户只选择了一个文件,那么只需要访问FileList对象的第一个元素:
var filelist=document.getElementById('thisFile').files; var selectedFile=filelist[0];
使用input元素时,用户在选择文件后会触发其change事件:
var inputElement=document.getElementById('thisFile') inputElement.addEventListener("change",handleFiles,false) function handleFiles(){ war fileList=this.files }
和其他类数组对象一样,FileList也有length属性,可以轻松遍历其File对象:
for (var i=0,numFiles=files.length;i< numFiles;i++) { var file=files[i] ... }
File对象有3个很有用的属性,包括了关于该文件的许多有用信息。
(1)name:文件名,不包含路径信息。
(2)size:文件大小,以B为单位。
(3)type:文件的MIME type。
需要注意的是,这3个属性都是只读的。