js上传文件
时间: 2023-08-06 09:27:29 浏览: 174
在 JavaScript 中,我们可以通过 File API 来实现文件上传功能。以下是一个简单的文件上传示例:
HTML 代码:
```html
<form>
<input type="file" id="fileInput">
<button type="button" onclick="uploadFile()">上传文件</button>
</form>
```
JavaScript 代码:
```javascript
function uploadFile() {
let fileInput = document.getElementById('fileInput');
let file = fileInput.files[0];
let formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
}
```
在上面的代码中,我们首先获取了用户选择的文件,然后创建了一个 FormData 对象,并将文件添加到其中。接下来,我们使用 fetch 函数来发送文件到服务器端。在服务器端,你需要处理文件上传并返回响应。
需要注意的是,上面的示例中使用了 fetch 函数来发送文件,如果需要兼容老版本的浏览器,可以使用 XMLHttpRequest 对象来实现文件上传功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)