JavaScript:Dropzone.js - 将文件大小和尺寸添加到表单提交中

Question

我正在测试Dropzone的一些示例代码.js并想看看我是否可以将文件大小作为表单字段提交：

var KTFormsDropzoneJSDemos = {
init: function(e) {
new Dropzone("#kt_dropzonejs_example_1", {
url: "add/submit/",
paramName: "file",
maxFiles: 10,
maxFilesize: 10,
addRemoveLinks: !0
}),
function() {
const e = "#kt_dropzonejs_example_3",
o = document.querySelector(e);
var r = o.querySelector(".dropzone-item");
r.id = "";
var t = r.parentNode.innerHTML;
r.parentNode.removeChild(r);
var l = new Dropzone(e, {
url: "add/submit/",
parallelUploads: 20,
maxFilesize: 0.25, // 1 MB
acceptedFiles: ".jpeg,.jpg",
previewTemplate: t,
previewsContainer: e + " .dropzone-items",
clickable: e + " .dropzone-select"
});
l.on("addedfile", (function(e) {
o.querySelectorAll(".dropzone-item").forEach((e => {
e.style.display = ""
}))
})), l.on("totaluploadprogress", (function(e) {
o.querySelectorAll(".progress-bar").forEach((o => {
o.style.width = e + "%"
}))
})), l.on("sending", (function(e) {
o.querySelectorAll(".progress-bar").forEach((e => {
e.style.opacity = "1"
}))
})), l.on("complete", (function(e) {
const r = o.querySelectorAll(".dz-complete");
setTimeout((function() {
r.forEach((e => {
e.querySelector(".progress-bar").style.opacity = "0", e.querySelector(".progress").style.opacity = "0"
}))
}), 300)
}))
}()
}
};
KTUtil.onDOMContentLoaded((function() {
KTFormsDropzoneJSDemos.init()
}));

Dropzone.js"提示和技巧"页面列出了如何发送文件大小，高度和宽度的示例：

拖放区将数据添加到事件触发时可以使用的文件对象。您可以访问file.width并file.height它是否是图像，

如果要向文件上传添加必须特定于每个文件的其他数据，可以注册发送事件：

myDropzone.on("sending", function(file, xhr, formData) {
// Will send the filesize along with the file as POST data.
formData.append("filesize", file.size);
});

我在#kt_dropzonejs_example_3部分下的示例代码中有"发送"部分，但我无法弄清楚如何像使用示例代码那样附加数据。如何编辑"发送"代码以将文件大小添加为表单数据？

Answer 1

根据示例，在处理sending事件时应接受其他参数：

l.on("sending", (function(file, xhr, formData) {
o.querySelectorAll(".progress-bar").forEach((e => {
e.style.opacity = "1"
}));
formData.append("filesize", file.size);
})),

根据我对格式的评论，我个人更喜欢代码看起来像这样：

dropzoneExample3.on("sending", (file, xhr, formData) => {
dropzoneElement.querySelectorAll(".progress-bar").forEach(element => element.style.opacity = "1");
formData.append("filesize", file.size);
});