我正在使用 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>
我试图实现的是,不再显示上传预览,因此它们不再是每个文件的预览,而是一个进度条,显示完整上传的整体过程(也许只显示一个如果有则出错,但否则不显示每一项)。有什么办法可以实现这个目标吗?
编辑:一个可选点是在 Bootstrap 模式中显示此进度栏,这样当您上传内容时它不会更改网站上的任何内容。
最佳答案
这有几个部分。首先,您希望避免为已排队或正在上传的项目提供任何预览模板。我认为 dropzone 需要某种对象,因此您基本上可以通过将 dropzone 初始化中的 PreviewTemplate 选项设置为内部没有任何内容的 div 来实现此目的:
var myDropzone = new Dropzone("#uploadFile", {
url: "upload.php",
previewTemplate: "<div></div>"
});
另一部分是进度条。要实现此目的,您可以为 addedfile 添加事件监听器。创建进度条
myDropzone.on("addedfile", function (file) {
// Build progress bar here
});
然后,使用totaluploadprogress来自 dropzone 的事件用于更新进度栏上的进度:
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
});
希望这能为您指明正确的方向。当然还需要其他清理工作,例如何时隐藏总进度条等。
关于javascript - Dropzone.js - 只显示完整上传的进度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36565817/