HTML中的表单文件选择框怎么做？ 文件选择器实现

<form>
  <label for="fileUpload">选择文件:</label>
  <input type="file" id="fileUpload" name="fileUpload">
</form>

<form>
  <label for="fileUploadMultiple">选择多个文件:</label>
  <input type="file" id="fileUploadMultiple" name="fileUploadMultiple" multiple>
</form>

<form>
  <label for="imageUpload">选择图片:</label>
  <input type="file" id="imageUpload" name="imageUpload" accept="image/*">
</form>

<form id="uploadForm">
  <label for="fileInput">选择文件:</label>
  <input type="file" id="fileInput" name="fileInput">
  <button type="submit">上传</button>
</form>

<script>
  const form = document.getElementById('uploadForm');
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认的表单提交行为

    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0]; // 获取选择的第一个文件

    if (file) {
      // 创建 FormData 对象，用于上传文件
      const formData = new FormData();
      formData.append('file', file);

      // 使用 fetch API 上传文件
      fetch('/upload', { // 替换为你的上传 API 地址
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        console.log('上传成功:', data);
      })
      .catch(error => {
        console.error('上传失败:', error);
      });
    } else {
      console.log('请选择一个文件');
    }
  });
</script>

<style>
  .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
  }
  #fileElem {
    display: none; /* 隐藏文件选择框 */
  }
</style>

<label for="fileElem" class="custom-file-upload">
    选择文件
</label>
<input type="file" id="fileElem" accept="image/*" multiple>

<script>
  const fileElem = document.getElementById("fileElem");
  const customButton = document.querySelector('.custom-file-upload');

  customButton.addEventListener('click', function(event) {
    fileElem.click(); // 触发文件选择框的点击事件
    event.preventDefault(); // 阻止默认行为
  });

  fileElem.addEventListener("change", handleFiles, false);

  function handleFiles() {
    const fileList = this.files;
    console.log("Selected files:", fileList);
    // 在这里处理选择的文件
  }
</script>

<input type="file" id="imageInput" accept="image/*">
<img id="imagePreview" src="#" alt="预览" style="max-width: 200px; max-height: 200px; display: none;">

<script>
  const imageInput = document.getElementById('imageInput');
  const imagePreview = document.getElementById('imagePreview');

  imageInput.addEventListener('change', function() {
    const file = this.files[0];

    if (file) {
      const reader = new FileReader();

      reader.addEventListener('load', function() {
        imagePreview.src = reader.result;
        imagePreview.style.display = 'block'; // 显示预览图片
      }, false);

      reader.readAsDataURL(file);
    } else {
      imagePreview.src = '#';
      imagePreview.style.display = 'none'; // 隐藏预览图片
    }
  });
</script>

<input type="file" id="fileInput">

<script>
  const fileInput = document.getElementById('fileInput');

  fileInput.addEventListener('change', function() {
    const file = this.files[0];
    const maxSizeInBytes = 2 * 1024 * 1024; // 2MB

    if (file && file.size > maxSizeInBytes) {
      alert('文件大小超过 2MB，请重新选择');
      this.value = ''; // 清空文件选择
    }
  });
</script>