从JavaScript中的<img src>标签上传图片可以通过以下步骤实现:
以下是一个示例代码:
// HTML部分
<input type="file" id="uploadInput">
// JavaScript部分
document.getElementById('uploadInput').addEventListener('change', function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function() {
var base64Image = reader.result.split(',')[1]; // 获取Base64编码的图片内容
var formData = new FormData();
formData.append('image', base64Image); // 将图片内容添加到FormData中
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true); // 发送POST请求到服务器的/upload路径
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 上传成功
console.log('上传成功');
}
};
xhr.send(formData); // 发送请求
};
reader.readAsDataURL(file); // 读取图片文件
});
在上述示例中,我们通过监听<input>标签的change事件,获取用户选择的图片文件。然后使用FileReader对象读取图片文件内容,并将其转换为Base64编码格式。接下来,我们创建一个FormData对象,并将Base64编码的图片内容添加到FormData中。最后,使用XMLHttpRequest对象发送POST请求,将FormData作为请求体发送到服务器的/upload路径。
请注意,上述示例中的服务器端代码未包含在答案中。具体的服务器端实现方式会因不同的后端语言和框架而有所不同。
领取专属 10元无门槛券
手把手带您无忧上云