首頁技術(shù)文章正文

Web前端培訓(xùn):如何通過表單選擇文件?

更新時間:2022-10-18 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

  由于web環(huán)境的特殊性,為了考慮文件安全問題,瀏覽器不允許JavaScript直接訪問文件系統(tǒng),但可以通過file類型的input元素或者拖放的方式選擇文件操作。

<input type="file" id="thisFile"/>

  File表單可以讓用戶選取一個或者多個文件(multiple屬性),通過FileAPI,可在用戶選擇文件后訪問到代表了所選文件列表的FileList對象,F(xiàn)ileList對象是一個類數(shù)組的對象,其中包含著一個或多個File對象。如果沒有multiple屬性或者用戶只選了一個文件,那么只需要訪問FileList對象的第一個元素:

var filelist=document.getElementById('thisFile').files;
var selectedFile=filelist[0];

  使用input元素時,用戶在選擇文件后會觸發(fā)其change事件:

var inputElement=document.getElementById('thisFile')
inputElement.addEventListener("change",handleFiles,false)
function handleFiles() {
   war fileList=this.files
}

  和其他類數(shù)組對象一樣,F(xiàn)ile也有l(wèi)ength屬性,可以輕松遍歷其File對象:

for (var i=0, numFiles=files.length;i< numFiles;i++) {
     var file=files[i]
     ...
}

  File對象有3個很有用的屬性,包括了關(guān)于該文件的許多有用信息。

  (1)name:文件名,不包含路徑信息。

  (2)size:文件大小,以B為單位。

  (3)type:文件的MIMEtype。

  需要注意的是,這3個屬性都是只讀的。

分享到:
在線咨詢 我要報名
和我們在線交談!