JS中XMLHttpRequest上传完成监听

admin

JS中XMLHttpRequest上传完成监听
在 JavaScript 中，使用  `XMLHttpRequest`  对象进行文件上传时，可以通过监听  `onload`  事件来处理上传完成的逻辑。以下是一个示例，展示如何使用  `XMLHttpRequest`  进行文件上传并监听上传完成事件：

1. // 获取文件输入框和上传按钮
   
2. const fileInput = document.getElementById('fileInput');
   
3. const uploadButton = document.getElementById('uploadButton');
   
4. // 监听上传按钮的点击事件
   
5. uploadButton.addEventListener('click', function() {
   
6.     const file = fileInput.files[0]; // 获取选择的文件
   
7.     if (!file) {
   
8.         alert('请先选择一个文件');
   
9.         return;
   
10.     }
    
11.      const xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
    
12.      // 设置请求方法和目标 URL
    
13.     xhr.open('POST', '/upload', true);
    
14.      // 监听上传完成事件
    
15.     xhr.onload = function() {
    
16.         if (xhr.status === 200) {
    
17.             // 上传成功
    
18.             console.log('文件上传成功:', xhr.responseText);
    
19.             alert('文件上传成功');
    
20.         } else {
    
21.             // 上传失败
    
22.             console.error('文件上传失败:', xhr.statusText);
    
23.             alert('文件上传失败');
    
24.         }
    
25.     };
    
26.      // 监听上传进度（可选）
    
27.     xhr.upload.onprogress = function(event) {
    
28.         if (event.lengthComputable) {
    
29.             const percentComplete = (event.loaded / event.total) * 100;
    
30.             console.log('上传进度: ' + percentComplete + '%');
    
31.         }
    
32.     };
    
33.      // 创建 FormData 对象并将文件添加到其中
    
34.     const formData = new FormData();
    
35.     formData.append('file', file);
    
36.      // 发送请求
    
37.     xhr.send(formData);
    
38. });

复制代码

### 代码说明：
1. **文件输入框和上传按钮**：通过  `document.getElementById`  获取文件输入框和上传按钮。
2. **点击事件监听**：为上传按钮添加点击事件监听器，获取用户选择的文件。
3. **创建 XMLHttpRequest 对象**：使用  `new XMLHttpRequest()`  创建一个新的 XMLHttpRequest 对象。
4. **设置请求**：使用  `xhr.open()`  方法设置请求类型（POST）和目标 URL。
5. **监听上传完成事件**：使用  `xhr.onload`  监听上传完成事件，检查响应状态并处理成功或失败的情况。
6. **监听上传进度**：可选地使用  `xhr.upload.onprogress`  监听上传进度，以便实时更新用户界面。
7. **创建 FormData 对象**：使用  `FormData`  对象来包装文件数据。
8. **发送请求**：调用  `xhr.send(formData)`  发送请求。
### 总结
通过以上代码，你可以实现文件的上传并监听上传完成的事件。