图片上传前端代码
时间: 2023-08-23 16:06:54 浏览: 43
以下是一个简单的图片上传前端代码示例,使用了HTML和JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片上传</title>
</head>
<body>
<form enctype="multipart/form-data">
<input type="file" name="image" id="image">
<button type="button" onclick="uploadImage()">上传图片</button>
</form>
<script>
function uploadImage() {
var formData = new FormData();
var fileInput = document.getElementById("image");
formData.append("image", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload"); // 上传图片的接口地址
xhr.send(formData);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上传成功后的处理
}
}
}
</script>
</body>
</html>
```
这段代码创建了一个表单,包含一个文件选择框和一个上传按钮。当用户选择了一个文件后,点击上传按钮就会触发`uploadImage()`函数,该函数使用`FormData`对象将选择的文件打包成表单数据,并使用`XMLHttpRequest`对象发送POST请求到指定的上传接口。在上传成功后,可以根据需要进行相应的处理。