原生js使用ajax上传文件没有-----------------------------118891371638349183484031454930,怎么处理
时间: 2024-06-22 22:00:39 浏览: 137
在原生JavaScript中,使用`XMLHttpRequest`或更现代的`fetch` API来进行Ajax文件上传通常涉及以下几个步骤:
1. 创建一个新的`XMLHttpRequest`对象或`fetch`请求实例:
```javascript
var xhr = new XMLHttpRequest();
// 或者 fetch API:
var formData = new FormData();
```
2. 设置请求方法(通常是`POST`)并设置URL:
```javascript
xhr.open('POST', '/your-upload-url', true);
// 或者 fetch:
xhr.request = new Request('/your-upload-url', { method: 'POST' });
```
3. 添加文件到请求体(`FormData`对象用于文件上传):
```javascript
xhr.upload.addEventListener('progress', function(e) {
// 处理上传进度事件
});
xhr.send(formData.append('file', fileInput.files));
// 或者 fetch:
formData.append('file', fileInput.files);
fetch(xhr.request)
.then(response => response.json())
.then(data => {
// 处理服务器响应
});
```
4. 监听请求状态变化,当请求完成时处理响应:
```javascript
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
// 请求成功,处理服务器返回的数据
} else {
// 处理错误
}
};
// 或者 fetch:
xhr.onloadend = function() {
if (xhr.status >= 200 && xhr.status < 400) {
console.log(xhr.response);
} else {
console.error(xhr.statusText);
}
};
```
5. 可能还需要处理文件输入、取消上传、超时等其他情况,根据实际需求添加适当的事件监听和错误处理。
阅读全文