<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
background-color: aliceblue;
}
.progress{
width: 100%;
height: 8px;
background-color:
position: relative;
display: none;
}
.progress .after{
content: "";
background-color: aqua;
height: 8px;
width: 0%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="file" id="myfile"> <button onclick="up()">上传</button>
<div class="box">
<div class="progress">
<div class="after"></div>
</div>
</div>
<script type="text/javascript">
function up(){
var myfile=document.getElementById("myfile").files[0];
var form=new FormData();
form.append("file",myfile);
var xhr=new XMLHttpRequest();
xhr.open("POST","https://www.520mg.com/ajax/file.php");
var progress=document.querySelector(".box .progress");
progress.style.display="none";
xhr.onload=function(){
var data=JSON.parse(xhr.responseText);
if(data.error==0){
var box=document.querySelector(".box");
box.style.backgroundImage="url(http://www.520mg.com"+data.pic+")";
box.style.backgroundSize="cover";
}else{
alert(data.error);
}
}
xhr.upload.onprogress=function(e){
var after=document.querySelector(".box .after");
after.style.width=Math.round(e.loaded/e.total*100)+"%";
if(e.loaded==e.total){
progress.style.display="none";
}
}
xhr.send(form);
progress.style.display="block";
}
</script>
</body>
</html>
