原生javascript实现文件异步上传的实例讲解

原生JavaScript实现文件异步上传可以分为以下几个步骤：

1. 获取上传文件的表单元素，并绑定change事件。在change事件中，获取文件对象并进行处理，最终调用上传函数。

// 获取上传文件表单元素
const fileInput = document.getElementById('fileInput');
// 绑定change事件
fileInput.addEventListener('change', handleFileSelect, false);

// 处理文件选择的函数
function handleFileSelect(e) {
  // 获取文件对象
  const files = e.target.files;
  // 进行处理，如数据预览等
  // ...
  // 调用上传函数
  uploadFile(files[0]);
}

1. 封装一个上传函数，使用XMLHttpRequest对象进行发送。需要注意的是，在发送前需要设置请求头的Content-Type为multipart/form-data，同时需要自动生成一个boundary字符串用于分割每个字段。

function uploadFile(file) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', file); // 添加文件对象
  xhr.open('POST', 'upload.php', true);
  // 设置请求头
  const boundary = `----${new Date().getTime()}`;
  xhr.setRequestHeader('Content-Type', `multipart/form-data; boundary=${boundary}`);
  // 发送数据
  xhr.send(formData);
}

1. 在服务端接收上传文件。这里以PHP为例，使用$_FILES数组获取上传文件信息，然后进行后续处理。

$file = $_FILES['file'];
$ext = pathinfo($file['name'], PATHINFO_EXTENSION);
$savePath = '/path/to/save/'.$file['name'];
if (move_uploaded_file($file['tmp_name'], $savePath)) {
  echo 'Upload successfully!';
} else {
  echo 'Upload failed!';
}

以上就是原生JavaScript实现文件异步上传的主要步骤。其中需要注意的是，由于文件上传涉及到很多细节，如文件大小限制、进度条显示、上传失败重试等，需要结合实际项目需求进行不断完善与优化。

下面是两个示例说明：

示例一：添加上传进度条

在上传函数中，可以监听XMLHttpRequest的progress事件，并计算上传进度百分比，然后更新进度条UI。

const progressBar = document.getElementById('progressBar');

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    progressBar.style.width = percentComplete + '%';
  }
}

示例二：添加上传失败重试机制

在程序中加入失败重试机制，当上传失败时重新发送请求。

function uploadFile(file) {
  const xhr = new XMLHttpRequest();
  const formData = new FormData();
  formData.append('file', file);
  xhr.open('POST', 'upload.php', true);
  const boundary = `----${new Date().getTime()}`;
  xhr.setRequestHeader('Content-Type', `multipart/form-data; boundary=${boundary}`);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // 请求完成
      if (xhr.status === 200) { // 请求成功
        console.log('Upload successfully!');
      } else { // 请求失败
        console.log('Upload failed! Retrying...');
        uploadFile(file); // 重新发送请求
      }
    }
  }
  xhr.send(formData);
}