ajax 上传文件 取消

AJAX上传文件是一种非常常见的Web开发技术，它允许我们在不刷新页面的情况下上传文件。一个常见的应用场景是在一个社交媒体网站上，用户可以通过AJAX上传图片或视频文件，并在上传过程中取消上传。本文将探讨如何使用AJAX上传文件，并介绍如何在上传过程中取消上传操作。

首先，让我们来看一个简单的示例。假设我们有一个文件上传表单，用户可以选择一个文件并点击“上传”按钮：

<form id="uploadForm" enctype="multipart/form-data" action="upload.PHP" method="POST">
   <input type="file" name="file" id="file" />
   <input type="button" value="上传" onclick="uploadFile()" />
   <input type="button" value="取消" onclick="cancelUpload()" />
</form>

上面的代码中，我们定义了一个form表单，并使用enctype属性设置文件上传的编码类型为multipart/form-data。然后，我们通过input标签的type属性设置为file，创建了一个文件选择框，允许用户选择文件。接下来，我们定义了两个按钮，一个用于上传文件，另一个用于取消上传操作。

接下来，我们需要编写JavaScript代码来处理上传和取消上传操作。首先，我们创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

然后，我们定义一个uploadFile函数，用于处理文件上传操作：

function uploadFile() {
   var fileInput = document.getElementById("file");
   var file = fileInput.files[0];
   
   var formData = new FormData();
   formData.append("file",file);
   
   xhr.open("POST","upload.PHP");
   
   xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
         // 上传成功后的处理逻辑
      }
   };
   
   xhr.send(formData);
}

在上面的代码中，我们首先获取文件选择框中选择的文件，然后创建一个FormData对象，并通过append方法将文件添加到FormData中。接下来，我们使用XMLHttpRequest对象的open方法设置请求的方法和URL，并使用onreadystatechange事件处理函数监听上传过程。最后，我们使用XMLHttpRequest对象的send方法发送请求。

现在，我们需要编写cancelUpload函数来取消上传操作：

function cancelUpload() {
   xhr.abort();
}

在cancelUpload函数中，我们使用XMLHttpRequest对象的abort方法来终止上传操作。

综上所述，我们可以使用AJAX上传文件并在上传过程中取消上传操作。通过使用XMLHttpRequest对象和FormData对象，我们可以实现更加灵活和用户友好的文件上传功能。当用户选择取消上传时，我们可以使用XMLHttpRequest对象的abort方法终止上传操作。