如何显示链接-ike 文本以打开资源管理器以上传文件/文件夹？

Question

我正在尝试实现一个上传功能，但我想显示一个文本而不是输入，例如 Drop Folder 而不是默认的 Choose File <Filename> Upload，使用如下输入：

    <div class="upload-folder" style="display:inline">
        <input type="file"
               id="file"
               webkitdirectory 
               multiple
               (change)="handleFileInput($event.target.files)">
    
        <button (click)="uploadFiles()">Upload</button>
    </div>

如何使用 ClickListener 显示文本 Drag Folder，单击它会打开资源管理器？

感谢您帮助我。有什么不清楚的可以随时问我！

Answer 1

使用for 属性使用专用标签并完全隐藏您通常上传的文件

 <label for="fileupload">Drag folder</label>
 <div class="upload-folder" style="display:none">
   <input id="fileupload" type="file" id="file" webkitdirectory multiple (change)="handleFileInput($event.target.files)">

   <button (click)="uploadFiles()">Upload</button>
 </div>