上传文件到服务器可以使用JavaScript的File和FormData对象以及XMLHttpRequest对象。下面是一个示例代码,演示如何使用JavaScript上传文件:
<!DOCTYPE html>
<html>
<body>
<h2>文件上传</h2>
<input type="file" id="myFile">
<button onclick="uploadFile()">上传</button>
<script>
function uploadFile() {
// 获取文件对象
var fileInput = document.getElementById("myFile");
var file = fileInput.files[0];
// 创建FormData对象
var formData = new FormData();
formData.append("file", file);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法、URL和异步标志
xhr.open("POST", "your_server_url", true);
// 设置请求头(如果需要)
xhr.setRequestHeader("Content-Type", "multipart/form-data");
// 监听上传进度
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
console.log(percentComplete + "% 已上传");
}
};
// 请求完成处理函数
xhr.onload = function() {
if (xhr.status === 200) {
console.log("文件上传成功");
} else {
console.log("文件上传失败: " + xhr.status);
}
};
// 发送请求
xhr.send(formData);
}
</script>
</body>
</html>