更新時間:2022-10-18 來源:黑馬程序員 瀏覽量:
由于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個屬性都是只讀的。
【AI設(shè)計】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運營】深圳跨境電商運營畢業(yè)22個工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運維】鄭州運維1期就業(yè)班,畢業(yè)14個工作日,班級93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)當(dāng)天offer率91%,薪資1W+占比54.2%,班級均薪12k+
2025-09-19CSS怎樣合并相鄰塊元素垂直外邊距?
2022-10-18前端高級Node.JS快速入門 零基礎(chǔ)可學(xué)
2022-10-13Express中間件的調(diào)用流程和常規(guī)操作,5分鐘了解
2022-10-13web前端培訓(xùn)機構(gòu)哪個機構(gòu)講得好|【點擊領(lǐng)取福利】前端開發(fā)教程資源下載
2022-10-10從基礎(chǔ)知識到實戰(zhàn)案例,前端都能快速上手的jQuery教程
2022-10-07Vue開發(fā)環(huán)境:如何使用vue creat命令創(chuàng)建項目
2022-10-06