文章摘要
这篇文章介绍了如何使用HTML、Bootstrap、jQuery和XHTML/JSON（XHR）来实现一个文件上传功能。网页设计使用Bootstrap框架，提供了用户友好的界面；前端代码通过jQuery实现了对文件的选择和上传功能。在服务器端，使用了Postman工具接收上传的文件，并返回图片路径。网页实时显示了上传进度，并在成功上传后展示了图片。整个解决方案简洁高效，体现了前端与后端的协同工作。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<link rel=”stylesheet” href=”https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css” rel=”external nofollow” >
<script src=”https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js”></script>
<script src=”https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>
<!–1、文件选择框 –>
<input type=”file” id=”file1″>
<!– 2、上传文件的按钮 –>
<button id=”btnupload”>上传文件</button>
<br/>
<div class=”progress” style=”width:300px;margin:5px;”>
<div class=”progress-bar progress-bar-striped active” style=”width: 0%;” id=”precent”>
0%
</div>
</div>
<!– 3、img标签 来显示上传成功以后的图片 –>
<img alt=”” id=”img” width=”800″>
<script>
var precent=document.querySelector(‘#precent’)
var btnupload=document.querySelector(‘#btnupload’)
btnupload.addEventListener(‘click’, function() {
var files=document.querySelector(‘#file1’).files
if (files.length <=0) {
return alert(‘请选择要上传的文件’)
}
var fd=new FormData()
fd.append(‘avatar’, files[0])
var xhr=new XMLHttpRequest()
xhr.upload.onprogress=function(e) {
console.log(e);
if (e.lengthComputable) {
var h=Math.ceil((e.loaded / e.total) * 100)
precent.style.width=h + ‘%’
precent.innerHTML=h + ‘%’
console.log(h);
}
}
xhr.upload.onload=function() {
$(‘#precent’).removeClass().addClass(‘progress-bar progress-bar-success’)
}
xhr.open(‘post’, ‘http://www.liulongbin.top:3006/api/upload/avatar’)
xhr.send(fd)
xhr.onreadystatechange=function() {
if (xhr.readyState==4 && xhr.status==200) {
var data=JSON.parse(xhr.responseText)
console.log(data);
if (data.status==200) {
console.log(‘上传成功’);
document.querySelector(‘#img’).src=’http://www.liulongbin.top:3006′ + data.url
} else {
console.log(‘上传失败’);
}
}
}
})
</script>
</body>
</html>