这是利用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")) }
