「JavaScript」HTMLInputElement.webkitDirectory プロパティを使うサンプル
説明
HTMLInputElement.webkitDirectory プロパティで、 webkitdirectory という HTML 属性の値を反映し、
<input> 要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。
使用例1
<div class="sampleA"> <input type="files" class="sampleB" name="uploadFile" webkitDirectory multiple> </div> CSSコード .sampleA{ overflow:hidden; } .sampleA .sampleB { position: absoulte; }
使用例2
htmlコード <input type="file" id="uploadFileSelect" name="uploadFileLst" webkitdirectory multiple /> <ul id="ulFileId"></ul> JavaScriptコード document.getElementById("uploadFileSelect").addEventListener("change", function(event) { let result = document.getElementById("ulFileId"); let uploadFiles = event.target.files; for (let i=0; i<uploadFiles.length; i++) { let liItem= document.createElement("li"); liItem.innerHTML = uploadFiles[i].webkitRelativePath; result.appendChild(liItem); }; }, false);