前端,原生js,文件如何上传
时间: 2023-12-05 17:57:56 浏览: 33
在前端使用原生 JavaScript 上传文件可以通过以下步骤实现:
1. 创建一个包含 input 元素的表单,设置 input 的 type 属性为 file。
```html
<form>
<input type="file" name="file" id="fileInput">
<button type="submit">上传</button>
</form>
```
2. 获取 input 元素,并添加一个事件监听器,当用户选择文件后触发上传操作。
```javascript
const fileInput = document.querySelector('#fileInput');
fileInput.addEventListener('change', () => {
const selectedFile = fileInput.files[0];
// 执行上传操作
});
```
3. 构建一个 FormData 对象,将选中的文件添加到 FormData 中,并使用 XMLHttpRequest 对象上传 FormData。
```javascript
const fileInput = document.querySelector('#fileInput');
fileInput.addEventListener('change', () => {
const selectedFile = fileInput.files[0];
const formData = new FormData();
formData.append('file', selectedFile);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);
});
```
4. 在服务器端接收上传的文件,并进行处理。
以上就是使用原生 JavaScript 实现文件上传的基本步骤。需要注意的是,上传文件的过程中,需要考虑到一些安全性问题,比如限制文件大小、文件类型等。