上传图片在JavaScript中的流程通常涉及以下步骤:
file.size
属性检查文件大小。file.type
属性检查文件类型。XMLHttpRequest
的progress
事件可以显示上传进度。ReadableStream
来实现。document.getElementById('uploadButton').addEventListener('click', function() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
alert('请选择一个文件');
return;
}
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log(`上传进度: ${percentComplete}%`);
}
};
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功:', xhr.responseText);
} else {
console.error('上传失败:', xhr.statusText);
}
};
xhr.send(formData);
});
通过以上步骤,你可以实现一个基本的图片上传功能,并处理常见的上传问题。
领取专属 10元无门槛券
手把手带您无忧上云