我對前端很陌生，正在嘗試設計一個網頁。這將是這樣的：
在此處輸入圖片說明
有兩個導航選項卡：
1：檔案上傳：我們將通過拖放或從我們的本地路徑瀏覽來選擇一些檔案。（c盤）
2：檔案可用：這將顯示我們從本地選擇的所有檔案的串列，格式如下：
在此處輸入圖片說明
因此，由于我是前端新手，我不知道如何與本地機器（筆記本電腦）互動以獲取檔案并以串列格式在網頁上顯示它們。
如果你們能給我一些指導，我將不勝感激。
uj5u.com熱心網友回復：
你只需要在 html 中使用這個輸入標簽：
<input type="file" id="MyFile" multiple >
multiple如果我們想同時匯入多個檔案，我們使用
您將需要在 Javascript 上完成大部分作業：
const Input = document.getElementById('MyFile')
Input.addEventListener("change", function (e) {
var AllFiles = Input.files; //array of all imported files
var myFile = Input.files[0]; //to get the first file
var size = myFile.size; //size in bytes
var type = myFile.type; //file type
var myFileInfo = myFile.name.split(".")
var myFileName = myFileInfo[0] //get file name
var myFileExt = myFileInfo[1] //get file extention
//after that you can display your file in the dom using document.append
// you can also use for loop to loop through all files like so
for(const file of AllFiles){
console.log(file)
}
})
uj5u.com熱心網友回復：
您可以查看以下滿足您要求的視頻：https : //youtu.be/TjgPK5s-IfQ
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/354918.html
標籤：javascript html css
上一篇：簡單的NodeJSExpress應用程式無法獲取/url
下一篇：jQuery選擇自動格式化