文件上传新高度：用Ajax一招轻松搞定！

2023-09-06 23:20:24

Ajax文件上传：革新你的前端开发

作为一名前端开发人员，你可能已经精通了表单文件上传的传统方法。虽然它简单易用，但它也有局限性，例如需要刷新页面、文件大小限制和缺乏上传进度控制。

Ajax技术：打破障碍

Ajax（异步 JavaScript 和 XML）是一种革命性的技术，它使网页能够与服务器进行异步通信。它提供了局部刷新，无需提交整个表单即可上传文件，并允许显示上传进度条，让用户实时了解上传情况。

逐步实现Ajax文件上传

1. 创建表单

<form id="uploadForm">
  <input type="file" name="file" />
  <input type="submit" value="上传" />
</form>

2. 监听表单提交

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault();

  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 设置请求属性
  xhr.open('POST', '/upload', true);
  xhr.setRequestHeader('Content-Type', 'multipart/form-data');

  // 添加表单数据
  var formData = new FormData(document.getElementById('uploadForm'));
  xhr.send(formData);

  // 响应处理
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 上传成功
      alert('上传成功！');
    } else {
      // 上传失败
      alert('上传失败！');
    }
  };
});

3. 服务器端处理

<?php
// 获取文件
$file = $_FILES['file'];

// 保存文件
move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);

// 返回结果
echo json_encode(['success' => true]);
?>