Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Html
- <div class="file-input-container">
- <label for="excelFile" class="custom-file-upload">Choose Excel File</label>
- <input type="file" id="excelFile" accept=".xlsx" style="display:none;">
- <span id="fileName" class="file-name">No file chosen</span>
- </div>
- Css
- .file-input-container {
- margin-bottom: 20px;
- text-align: center;
- }
- .custom-file-upload {
- display: inline-block;
- padding: 10px 20px;
- font-size: 1.1em;
- color: #fff;
- background-color: #007bff;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- transition: background-color 0.3s ease, box-shadow 0.3s ease;
- margin-right: 10px;
- }
- .custom-file-upload:hover {
- background-color: #0056b3;
- box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.3);
- }
- .file-name {
- font-size: 1em;
- color: #333;
- vertical-align: middle;
- }
- Js
- document.getElementById("excelFile").addEventListener("change", function() {
- const fileName = document.getElementById("fileName");
- if (this.files.length > 0) {
- fileName.textContent = this.files[0].name;
- } else {
- fileName.textContent = "No file chosen";
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement