javascript - 如何显示进度状态以及如何检查所有文件是否使用 javascript 上传
问题描述
我正在创建多个文件上传,我正在将文件上传到远程 api,直到现在它工作正常,这是我的问题。
如果我删除了多个文件,它已经一个一个地上传了,所以我怎样才能找到所有文件是否已上传,以便在所有文件上传之后,我可以运行另一个函数 ,例如我有 3 个文件要上传和当我上传 api 调用,如 1sfile --> 2nd file --> 3rd file 在总上传成功后我想调用一个函数和
在这个过程中,我如何显示静态进度,因为它正在逐一上传进度将多次出现,直到总文件完成我想在 下面显示进度是我的上传代码::
函数 uploadImage(e) {
var upload_count=0,fail_count=0;for(let i=0;i<e.files.length;i++){ let xhr = new XMLHttpRequest(); let formData = new FormData(); let images = e.files[i]; formData.set('file',images); xhr.onreadystatechange = state => { if(xhr.status==201){ upload_count++; if(upload_count==e.files.length){ console.log("completed all") } } else if(xhr.status==400){ fail_count++; if(fail_count==e.files.length){ } } console.log("i="+i) console.log("lenght=="+e.files.length) } xhr.open("POST", '<some api>'); xhr.send(formData); }
}
解决方案
我将向您展示使用 Jquery 制作上传进度条的著名方法。
$.ajax({
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('.progress').addClass('hide');
}
}
}, false);
return xhr;
},
type: 'POST',
url: "you_api_path",
data: your_data,
success: function (data) {
$('#status').html('<b>Uploaded!!!</b>')
}
});
.progress {
display: block;
text-align: center;
width: 0;
height: 3px;
background: red;
transition: width .3s;
}
.progress.hide {
opacity: 0;
transition: opacity 1.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress"></div>
<div id="status"></div>
这是工作小提琴:http: //jsfiddle.net/jnzwcgbs/
推荐阅读
- ios - 在 Swift 中实现 MDC 滑块上的悬停状态
- design-patterns - 用于构建读/写包的设计模式
- postman - 邮递员,模式验证
- python - 为什么当我使用线程时我的 cv2.imshow() 停留在第一帧?
- c# - 我可以通过 .net 核心中的代码更新 appsettings.json 文件吗?
- r - cbind 不创建数据集,而是在 R 中创建字符向量
- html - 如何进行循环以从网页中的超链接中提取文本
- pointers - 如何编写这个函数,作为参数传递,返回一个指针?
- spring - 我正在尝试将父实体与其子实体一起保留,子记录中缺少父 ID
- java - 如何在 HiveMQ 中正确使用 TLS 1.3 密码套件?(获取 SSL 异常:在接收对等方的 close_notify 之前关闭入站)