js 原生实现文件上传
时间: 2023-11-07 08:05:01 浏览: 46
好的,关于 js 原生实现文件上传,一般可以使用 HTML5 新增的 FormData 对象和 XMLHttpRequest 对象的相关方法来实现。具体步骤如下:
1. 在 HTML 中添加一个表单,包含一个 `<input type="file">` 元素:
```
<form id="myForm">
<input type="file" name="myFile">
<input type="submit" value="Upload File">
</form>
```
2. 在 JS 中获取表单元素并监听表单的 `submit` 事件:
```
const myForm = document.getElementById('myForm')
myForm.addEventListener('submit', (event) => {
event.preventDefault() // 阻止表单默认提交行为
const formData = new FormData(myForm) // 创建一个 FormData 实例
const xhr = new XMLHttpRequest() // 创建一个 XMLHttpRequest 实例
// TODO: 设置 xhr 的事件监听器、请求地址、请求方式等
xhr.send(formData) // 发送请求
})
```
3. 在 XMLHttpRequest 实例中设置相应的事件监听器,如 `onload`,`onerror`,`onabort` 等,以处理成功和失败的情况并取得响应数据:
```
xhr.onload = function() {
if (this.status === 200) {
const data = JSON.parse(this.response)
// TODO: 处理响应数据,如显示上传成功的信息等
} else {
// TODO: 处理非 200 响应码的情况,如显示上传失败的信息等
}
}
xhr.onerror = function() {
// TODO: 处理请求错误的情况,如显示上传失败的信息等
}
xhr.onabort = function() {
// TODO: 处理请求被取消的情况,如显示上传被取消的信息等
}
```
以上是一般的简单处理方式,还可以根据具体需求添加一些限制条件,如文件大小、文件类型、上传进度等。