以下是一个使用AJAX上传带有文本输入字段数据的图片的示例代码:
HTML代码:
JavaScript代码:
var form = document.getElementById('uploadForm');
var message = document.getElementById('message');
form.addEventListener('submit', function(e) {
e.preventDefault();
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
message.textContent = '上传成功';
} else {
message.textContent = '上传失败';
}
};
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var progress = (e.loaded / e.total) * 100;
message.textContent = '上传进度:' + progress.toFixed(2) + '%';
}
};
xhr.send(formData);
});
PHP代码(upload.php):
请注意,上述代码中的upload.php
是一个示例的服务器端脚本,用于处理上传图片的逻辑。你需要根据自己的实际需求进行修改和完善。
上一篇:AJAX:400 错误的请求
下一篇:AJAX:发送表单数据时失败