当拖放区域中没有文件时禁用“提交”按钮

Disable Submit button when no file in drop zone

本文关键字：提交 按钮 文件 区域 拖放      更新时间：2023-09-26

我的代码中有一个实现的拖放区，但是我想在我的页面中的表单中禁用提交按钮，当没有文件上传到拖放区时，我有以下代码：

<script>
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.imageuploaddrop = {
    paramName: "fileimage",
    maxFilesize: 10, // MB
    autoProcessQueue: false,
    uploadMultiple: false,
    maxFiles: 1,
    addRemoveLinks: true,
    clickable: true,
    acceptedFiles: ".jpg,.png,.jpeg,.tif",
    dictInvalidFileType: "Invalid File Type. Only Jpg, Png and Tif are supported.",
    dictFileTooBig: "File too Big. Maximum 10 MB!",
    dictMaxFilesExceeded: "We only need one image.",
    init: function () {
        this.on("complete", function (file) {
            var myDropzone = this;
            if (myDropzone.getAcceptedFiles().length = 1) {
                myDropzone.processQueue();
            } else {
                done("There is an Error.");
                var submit2 = document.getElementById('submit2');
                submit2.disabled = true;
            }
        });
    }
};
</script>

但是，它不起作用。任何人都可以找出原因吗？谢谢！我尝试在外面禁用提交代码，它可以工作，似乎检查部分不起作用。

实际上，基础是我需要javascript代码，以便根据条件动态禁用/启用提交按钮（无需刷新页面）。在这种情况下，我使用的是拖放区，而拖放区并不真正支持多个元素，因此我正在尝试以最简单的方式获得解决方法，同时验证所有表单元素。

请检查 HTML 元素 ID 的驼化版本。 "imageuploaddrop"是真的吗？如果您只需要在上传图像时启用提交按钮;您可以尝试设置

autoProcessQueue: true

和 

init: function () {
    var submit2 = document.getElementById('submit2');
        submit2.disabled = true;
    this.on("complete", function (file) {
            submit2.disabled = false;            
    });
}
相关文章：