[英]Dropzone.js - only show progress of complete upload
我正在使用dropzone.js将文件上传到服务器。 文件就是这样的:
<div id="full_site">
<form id="uploadFile" method="post" name="uploadFile" action="upload.php"
class="dropzone needsclick dz-clickable full-height">
<span id="tmp-path"></span>
<div class="dz-message"><b></b></div>
</form>
</body>
<script>
$(document).ready(function () {
Dropzone.autoDiscover = false;
Dropzone.options.uploadFile = {
init: function () {
this.on("success", function (file, responseText) {
file.previewTemplate.appendChild(document.createTextNode(responseText));
});
this.on("sending", function (file) {
$("#tmp-path").html('<input type="hidden" name="path" value="' + file.fullPath + '" />')
});
}
};
var myDropzone = new Dropzone("#uploadFile", {
url: "upload.php"
});
});
</script>
我想要实现的是,不再显示任何上传预览,因此不再显示每个文件的预览,而是显示进度条,该进度条显示了完整上传的整个过程(可能仅显示错误,如果存在是一个,但不显示每个项目)。 有什么办法可以实现?
编辑 :可选点是以引导程序模式显示此进度栏,因此当您上传内容时,它不会更改网站上的任何内容。
有两个部分。 首先,您要避免为已排队或正在上载的项目提供任何预览模板。 我认为dropzone需要某种对象,因此基本上可以通过将dropzone初始化中的PreviewTemplate选项设置为div而不包含任何内容来完成此操作:
var myDropzone = new Dropzone("#uploadFile", {
url: "upload.php",
previewTemplate: "<div></div>"
});
另一部分是进度条。 为此,您可以为添加文件添加事件监听器以创建进度条
myDropzone.on("addedfile", function (file) {
// Build progress bar here
});
然后,使用dropzone中的totaluploadprogress事件来更新进度条上的进度:
myDropzone.on("totaluploadprogress", function(progress) {
// Update progress bar with the value in the variable "progress", which
// is the % total upload progress from 0 to 100
});
希望这为您指明了正确的方向。 当然,还需要进行其他清理,例如何时隐藏总进度条等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.