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

　　由于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)ile也有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：文件的MIMEtype。

　　需要注意的是，這3個(gè)屬性都是只讀的。