HTML5实现头像的上传
这是利用form-data给后台传输数据，来实现头像的上传加载！
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<input enctype="multipart/form-data" type="file">
<input id="Susername" type="text" placeholder="用户名">
<input id="Ssex" type="number" placeholder="年龄">
<input id="Sage" type="text" placeholder="专业">
<input id="Smajor" type="text" placeholder="学校">
<input id="Sschool" type="text" placeholder="QQ">
<input id="Sqq" type="text" placeholder="地址">
<input id="Saddress" type="text" placeholder="座右铭">
<input id="Smotto" type="button" value="上传">
<div style="clear: both;"></div>
<progress value="0" max="100"></progress>
</div>
<div class="showarea">
<h3>显示区域</h3>
</div>
</body>
</html>
- 样式代码
.container{
box-sizing: border-box;
width: 404px;
height: 100px;
border: 1px solid #ccc;
border-radius: 5px;
padding-top: 20px;
background: linear-gradient(to bottom,#0ff,#0ff 20px,transparent 0);
margin: 0 auto;
}
input{
padding: 0;
margin: 0;
}
.container input[type=file]{
width: 300px;
height: 30px;
border: 1px solid #ccc;
background: #7FFFD4;
color: #133131;
float: left;
}
.container input[typr=button]{
width: 100px;
height: 32px;
float: left;
border: 1px solid #ccc;
color: #133131;
}
progress{
display: none;
width: 400px;
height: 30px;
margin-top: 7px;
}
.showarea{
width: 600px;
min-height: 200px;
border: 1px solid #ccc;
margin: 30px auto;
}
.showarea h3{
widows: 100px;
margin: 0 auto;
line-height: 60px;
text-align: center;
border-bottom: 1px solid #cccc;
color: #133131;
}
.showareaimg{
max-width: 1000%;
}
- javescript代码
var file = document.querySelector('[type=file]');
var sub = document.querySelector('[type=button]');
var show = document.querySelector('.showarea');
var progress = document.querySelector('progress');
var Susername = document.getElementById('Susername');
var Ssex = document.getElementById('Ssex');
var Sage = document.getElementById('Sage');
var Smajor = document.getElementById('Smajor');
var Sschool = document.getElementById('Sschool');
var Sqq = document.getElementById('Sqq');
var Saddress = document.getElementById('Saddress');
var Smotto = document.getElementById('Smotto');
sub.onclick = function(e){
var fileobje = file.files[0];
var formdata = new FormData();
formdata.append('upload',fileobje);
formdata.append('upload',Susername.value);
formdata.append('upload',Ssex.value);
formdata.append('upload',Sage.value);
formdata.append('upload',Smajor.value);
formdata.append('upload',Sschool.value);
formdata.append('upload',Sqq.value);
formdata.append('upload',Saddress.value);
formdata.append('upload',Smotto.value);
var xhr = new XMLHttpRequest();
var fr = new FileReader();
fr.readAsDataURL(fileobje)
fr.onload=function(e){
// console.log(e);
var img = document.createElement('img');
img.src = this.result;
// console.log( img.src);
show.appendChild(img)
}
xhr.upload.onprogress = function(e){
progress.value= parseInt(e.loaded/e.total*100)
}
xhr.open("POST","http://127.0.0.1:3000/avatar")
// console.log(formdata)
xhr.send(formdata);
console.log(formdata)
console.log(formdata.getAll("upload"))
}
本文暂时没有评论，来添加一个吧(●'◡'●)