自定义input file 样式

全干小二

于 2023-06-25 16:54:16 发布

阅读量434

点赞数

分类专栏：前端文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/xiaozhaozai/article/details/131381383

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该文章展示了如何使用HTML、CSS和JavaScript来美化原生的文件上传组件。通过隐藏默认的文件选择按钮，创建自定义样式的上传容器和按钮，以及添加动态显示选定文件名的功能，实现了更加用户友好的文件上传体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <title>美化原生HTML上传文件</title>
  
  <style>
    /* 隐藏默认的文件选择按钮 */
    .input-file {
      display: none;
    }

    /* 定义自定义样式的文件上传容器 */
    .custom-file-upload {
      position: relative;
      display: inline-block;
      overflow: hidden;
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
    }

    /* 自定义样式的按钮 */
    .custom-file-upload label {
      display: inline-block;
      background-color: #3498db;
      color: white;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
    }

    /* 可选：添加鼠标悬停和按下效果 */
    .custom-file-upload label:hover,
    .custom-file-upload label:active {
      background-color: #2980b9;
    }

    /* 显示选中的文件名 */
    #file-name {
      display: inline-block;
      margin-left: 10px;
    }
  </style>

</head>
<body>
  <div class="custom-file-upload">
    <input type="file" id="file-input" class="input-file">
    <label for="file-input"><i class="fa fa-cloud-upload"></i>拿来吧你</label>
    <span id="file-name">没有选择文件</span>
  </div>

  <script>
    var fileInput = document.getElementById('file-input');
    var fileNameLabel = document.getElementById('file-name');

    fileInput.addEventListener('change', function() {
      if (this.files.length > 0) {
        fileNameLabel.textContent = this.files[0].name;
      } else {
        fileNameLabel.textContent = '没有选择文件';
      }
    });
  </script>
</body>
</html>