How to Hide File Input Elements and Replace Them with 'Browse' Buttons?

Stylishly Concealing File Input Elements with Browse Buttons

The default appearance of <input type="file"> elements includes a text field that displays the selected file path. However, for situations like multi-file uploads where the file path is not displayed, you may prefer a more streamlined interface with a visible "Browse" button only.

To achieve this, you can leverage CSS and JavaScript:

<input type="file">

This code snippet creates a hidden file input element with an ID of "selectedFile" and a visible button labeled "Browse..." with an onclick event listener. When the button is clicked, the hidden file input element's click event is triggered, allowing file selection without the visible text field.

For example, if you are using the multi-file upload code you mentioned from morningz.com, you can integrate this technique to enhance the user interface:

<input type="file">

With this modification, your multi-file upload page will feature only the "Browse..." button, offering a more user-friendly and streamlined experience.

The above is the detailed content of How to Hide File Input Elements and Replace Them with 'Browse' Buttons?. For more information, please follow other related articles on the PHP Chinese website!