<body>
<input type="file" id="file1" />
<button id="btnUpload">上传文件</button>
<br />
<img src="" alt="" id="img" width="600" />
<script>
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) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete);
}
};
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);
if (data.status === 200) {
document.querySelector('#img').src =
'http://www.liulongbin.top:3006' + data.url;
} else {
alert('上传失败');
console.log(data.message);
}
}
};
});
</script>
</body>
放在new XMLHttpRequert()后面就可以在控制台显示进度
<body>
<input type="file" id="file1" />
<button id="btnUpload">上传文件</button>
<br />
<img src="" alt="" id="img" width="600" />
<script>
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.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
//放在这里就不行
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete);
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
if (data.status === 200) {
document.querySelector('#img').src =
'http://www.liulongbin.top:3006' + data.url;
} else {
alert('上传失败');
console.log(data.message);
}
}
};
});
</script>
</body>
但是放在send()后面就不行了 这是为什么呢？
