js隐藏input file

<style>
  #fileInput {
    display: none;
  }
</style>

<input type="file" id="fileInput">
<button id="uploadButton">选择文件</button>

<script>
  document.getElementById('uploadButton').addEventListener('click', function() {
    document.getElementById('fileInput').click();
  });

  document.getElementById('fileInput').addEventListener('change', function() {
    // 处理文件选择后的逻辑
    console.log('文件已选择');
  });
</script>

<style>
  .file-wrapper {
    position: relative;
    display: inline-block;
  }
  #fileInput {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
</style>

<div class="file-wrapper">
  <button>选择文件</button>
  <input type="file" id="fileInput">
</div>

<script>
  document.getElementById('fileInput').addEventListener('change', function() {
    console.log('文件已选择');
  });
</script>

<button id="uploadButton">选择文件</button>

<script>
  document.getElementById('uploadButton').addEventListener('click', function() {
    const input = document.createElement('input');
    input.type = 'file';
    input.onchange = function() {
      console.log('文件已选择');
      // 处理文件
      // 移除输入元素
      input.remove();
    };
    document.body.appendChild(input);
    input.click();
  });
</script>