用原生js写一个文件上传
时间: 2023-05-30 19:01:47 浏览: 66
HTML代码:
```html
<input type="file" id="fileInput">
<button id="uploadBtn">上传文件</button>
```
JS代码:
```javascript
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
uploadBtn.addEventListener('click', () => {
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.error('上传失败');
}
}
}
});
```
以上代码监听了上传按钮的点击事件,获取文件输入框中的文件,使用FormData构建表单数据,使用XMLHttpRequest发送POST请求,最后根据请求状态判断上传成功或失败。注意,上传的URL需要根据实际情况修改。