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“Tips & Tricks”页面列出了如何发送文件大小、高度和宽度的示例：

Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if it’s an image,

If you want to add additional data to the file upload that has to be specific for each file, you can register for the sending event:

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);
});

JavaScript：Dropzone.js - 将文件大小和维度添加到表单提交

JavaScript: Dropzone.js - Adding File Size and Dimensions to Form Submission

javascript

dropzone.js

dropzone