JS文件动态上传进度条
<!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>
</head>
<body>
<input type="file" id="file1">
<button id="btn">上传文件</button>
<br>
<div class="progress" style="width: 500px; margin: 15px 10px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
0%
</div>
</div>
<!-- 用来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800">
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script>
//验证是否选择了文件
// 获取上传文件的按钮
var btn = document.querySelector('#btn')
// 2.为按钮添加点击事件
btn.addEventListener('click', function() {
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件')
}
// 2. 向FormData中追加文件
var fd = new FormData()
fd.append('avatar', files[0]) //avatar头像
var xhr = new XMLHttpRequest()
// 上传进度条事件
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(percentComplete);
// 动态设置进度
$('#percent').attr('style', 'width:' + percentComplete + '%;')
.html(percentComplete + '%')
}
}
// 上传完成事件
xhr.upload.onload = function() {
$('#percent').removeClass().addClass('progress-bar progress-bar-success')
}
xhr.open('POST', '/upload/file')
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 = '' + data.url
} else { //文件上传失败
console.log(data.message);
}
}
}
})
</script>
</body>
</html>axios({
method:'POST',
url: '/upload/file?name=' + name,
data: formData,
onUploadProgress: (e) => {
console.log(Math.floor(e.loaded / e.total * 100) + '%');
}
}).then(res=>{
console.log(res);
})下载文件
const link = document.createElement('a');
link.href = decodeURIComponent(res.data.url);
link.download = res.data.name;
link.click();
link.remove();使用axios下载文件
axios({
url: res.data.url,
method: 'GET',
responseType: 'blob',
}).then((response) => {
var fileURL = window.URL.createObjectURL(new Blob([response.data]));
var fileLink = document.createElement('a');
fileLink.href = fileURL;
fileLink.setAttribute('download', res.data.name);
fileLink.click();
});-
目录导航
打开“扫一扫”，打开网页后点击屏幕右上角分享按钮
或点击复制连接
![]()
或点击复制连接
2022-07-08 20:44:31 0个人觉得很赞
公告
昵称：默永
园龄：2年308天
注册时间：2021-11-15
当前在第：1页
总共：1条
搜索
精品文章 48小时阅读排行