Configuration Demo

// Get the template HTML and remove it from the doument

var previewNode = document.querySelector("#template");

previewNode.id = "";

var previewTemplate = previewNode.parentNode.innerHTML;

//开始先删除单个文件的布局

previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone(document.body, { // 指定拖拽区为body

url: "{{ url_for('upload_file') }}", // Set the url

thumbnailWidth: 80,

thumbnailHeight: 80,

parallelUploads: 20,

previewTemplate: previewTemplate,

autoQueue: false, // 当队列有文件，是否立刻自动上传到服务器

previewsContainer: "#previews", // 指定存放文件队列区

clickable: ".fileinput-button" // 点击某个按钮或区域后出现选择电脑中本地图片，默认是previewsContainer指定的区域

});

myDropzone.on("addedfile", function(file) {

// 让模版中的单个文件可以点击上传

file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };

});

// 显示所有文件整体上传进度1-100

myDropzone.on("totaluploadprogress", function(progress) {

document.querySelector("#total-progress .progress-bar").style.width = progress + "%";

});

myDropzone.on("sending", function(file) {

// 显示整体的上传的进度条，说明：原来是0，所以上面的style.width = progress + "%"即使是100%也看不到

document.querySelector("#total-progress").style.opacity = "1";

// 失效上传按钮

file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");

});

// 当没有文件上传时，隐藏进度条

myDropzone.on("queuecomplete", function(progress) {

document.querySelector("#total-progress").style.opacity = "0";

});

// 上传所有

document.querySelector("#actions .start").onclick = function() {

myDropzone.enqueueFiles(myDropzone.getAcceptedFiles());

//myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));与上面一样，可查看源码对比

};

//取消所有

document.querySelector("#actions .cancel").onclick = function() {

myDropzone.removeAllFiles(true);

};

第二种效果与默认的一样

Flask upload with Dropzone example

Dropzone.autoDiscover = false;//解决两次实例Dropzone错误，可在控制台看到该错误

$("#myId").dropzone({

url: "{{ url_for('upload_file') }}",

addRemoveLinks: true,

method: 'post',

filesizeBase: 1024,

previewTemplate: $('#preview-template').html(),//如果去掉该选项就会使用默认的

autoQueue: true,

init: function() {

this.on("addedfile", function(file) {

$(".start").click (function() {

this.enqueueFile(file);

})

});

}

});

demo文件

如果是flask框架可进行测试点击此处下载，如果是php或者其他就看看不必下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。