首页技术文章正文

Web前端培训:如何通过表单选择文件

更新时间: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个属性都是只读的。

分享到:
在线咨询 我要报名