ajax上传源码,示例代码

Ajax上传是一种通过使用JavaScript和XMLHttpRequest对象来实现无需刷新整个页面的文件上传技术。它可以通过异步方式将文件发送到服务器，并实时获取上传进度和服务器返回的结果，从而提供更好的用户体验。

下面是一个简单的示例代码，演示了如何使用Ajax上传文件：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听上传进度
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    var percent = (event.loaded / event.total) * 100;
    console.log('上传进度：' + percent + '%');
  }
};
// 监听上传完成事件
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('上传成功');
    console.log('服务器返回的结果：' + xhr.responseText);
  } else {
    console.log('上传失败');
  }
};
// 准备上传的文件
var file = document.getElementById('fileInput').files[0];
// 创建FormData对象，用于存储要上传的文件
var formData = new FormData();
formData.append('file', file);
// 发送请求
xhr.open('POST', '/upload', true);
xhr.send(formData);

在上面的示例代码中，首先我们创建了一个XMLHttpRequest对象，用于发送上传请求。然后，我们通过监听`upload.onprogress`事件来获取上传进度，并在控制台输出。接着，我们监听`xhr.onload`事件来处理上传完成后的操作，如果上传成功，我们输出"上传成功"并打印服务器返回的结果，否则输出"上传失败"。接下来，我们通过`document.getElementById('fileInput').files[0]`获取用户选择的文件，并创建一个FormData对象，将文件添加到其中。我们使用`xhr.open()`方法指定请求的方法、URL和是否异步，然后调用`xhr.send()`方法发送请求。

通过以上示例代码，我们可以看到Ajax上传的基本流程：创建XMLHttpRequest对象，监听上传进度和完成事件，准备上传的文件，创建FormData对象，发送请求。这样就实现了通过Ajax上传文件的功能。