写个文件上传的javaScript代码
时间: 2023-02-16 20:53:56 浏览: 90
以下是一个简单的文件上传 JavaScript 代码示例:
```javascript
// 创建一个文件选择器
var fileInput = document.createElement("input");
fileInput.type = "file";
// 监听文件选择事件
fileInput.addEventListener("change", function() {
// 获取选择的文件
var file = fileInput.files[0];
// 创建一个 FormData 对象
var formData = new FormData();
formData.append("file", file);
// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 监听上传进度事件
xhr.upload.addEventListener("progress", function(e) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + "% 上传完成。");
});
// 监听响应事件
xhr.addEventListener("load", function() {
console.log("文件上传成功。");
});
// 监听错误事件
xhr.addEventListener("error", function() {
console.log("文件上传失败。");
});
// 配置请求
xhr.open("POST", "/upload");
xhr.send(formData);
});
// 显示文件选择器
fileInput.click();
```
这个代码示例创建了一个文件选择器,监听文件选择事件,当用户选择文件后,将文件作为 FormData 对象的一部分发送到服务器,使用 XMLHttpRequest 对象来上传文件,并监听上传进度、响应和错误事件。
请注意,这只是一个简单的示例,在实际应用中,您可能需要对文件进行验证、添加额外的请求头、在上传失败时重试等
阅读全文