更新時(shí)間:2022-08-17 來(lái)源:黑馬程序員 瀏覽量:
由于Web環(huán)境的特殊性,為了考慮文件安全問(wèn)題,瀏覽器不允許JavaScript直接訪問(wèn)文件系統(tǒng),但可以通過(guò)file類型的input元素或者拖放的方式選擇文件操作。
<input type="file" id="thisFile"/>
File表單可以讓用戶選取一個(gè)或者多個(gè)文件(multiple屬性),通過(guò)FileAPI,可在用戶選擇文件后訪問(wèn)到代表了所選文件列表的FileList對(duì)象,F(xiàn)ileList對(duì)象是一個(gè)類數(shù)組的對(duì)象,其中包含著一個(gè)或多個(gè)File對(duì)象。如果沒(méi)有multiple屬性或者用戶只選擇了一個(gè)文件,那么只需要訪問(wèn)FileList對(duì)象的第一個(gè)元素:
var filelist=document.getElementById('thisFile').files; var selectedFile=filelist[0];
使用input元素時(shí),用戶在選擇文件后會(huì)觸發(fā)其change事件:
var inputElement=document.getElementById('thisFile') inputElement.addEventListener("change",handleFiles,false) function handleFiles(){ war fileList=this.files }
和其他類數(shù)組對(duì)象一樣,F(xiàn)ileList也有l(wèi)ength屬性,可以輕松遍歷其File對(duì)象:
for (var i=0,numFiles=files.length;i< numFiles;i++) { var file=files[i] ... }
File對(duì)象有3個(gè)很有用的屬性,包括了關(guān)于該文件的許多有用信息。
(1)name:文件名,不包含路徑信息。
(2)size:文件大小,以B為單位。
(3)type:文件的MIME type。
需要注意的是,這3個(gè)屬性都是只讀的。