文件上传的最佳前端体验做法

<input type="file" accept="image/*">

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', handleFileSelect);

function handleFileSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = function (e) {
    // 处理文件内容
    const fileContent = e.target.result;
    // 进行文件展示或其他操作
  };

  reader.readAsDataURL(file); // 读取文件内容
}

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', handleFileUpload);

function handleFileUpload(event) {
  const file = event.target.files[0];
  const formData = new FormData();
  
  formData.append('file', file); // 添加文件到表单数据

  // 添加其他表单数据
  formData.append('name', 'John Doe');

  // 发送文件数据给服务器
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    // 处理服务器响应
  })
  .catch(error => {
    // 处理上传错误
  });
}

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', handleFileUpload);

function handleFileUpload(event) {
  const file = event.target.files[0];
  const formData = new FormData();
  
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');
  
  xhr.upload.addEventListener('progress', function (event) {
    if (event.lengthComputable) {
      const percentage = Math.round((event.loaded / event.total) * 100);
      // 更新进度条或显示上传百分比
    }
  });

  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      // 上传完成
    }
  };

  xhr.send(formData);
}