原生js input file文件上传
时间: 2023-07-25 18:29:03 浏览: 128
原生JS上传文件,获取文件二进制数据及文件大小和文件名称
5星 · 资源好评率100%
好的,以下是一个简单的原生 JavaScript 实现文件上传的示例:
HTML 代码:
```html
<input type="file" id="inputFile">
<button onclick="uploadFile()">上传文件</button>
```
JavaScript 代码:
```javascript
function uploadFile() {
// 获取 input 元素
const inputFile = document.getElementById('inputFile');
// 获取文件对象
const file = inputFile.files[0];
// 创建 FormData 对象
const formData = new FormData();
// 将文件对象添加到 FormData 中
formData.append('file', file);
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 设置请求方式和 URL
xhr.open('POST', '/upload');
// 发送请求
xhr.send(formData);
// 监听请求状态变化事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功
console.log(xhr.responseText);
}
};
}
```
以上代码实现了文件上传的基本功能,但是并没有处理上传失败、进度条等问题。如果需要更完整的实现,需要参考相关文档进行开发。
阅读全文