(function( $ ){    // 模块级变量，用于存储模态ID、Dropzone实例等    let $modalId = '#modal-upload';    let $filesDropzone = null; // 用于存储当前的Dropzone实例    let $parallelUploads = 100;    let $maxFiles = 10;    let $files = []; // 如果需要跟踪上传文件    $.dispatcherFiles = {        // 缓存DOM元素，提高性能        cacheDom: function(){            this.$body = $('body');        },        // 核心功能函数        functions: {            // 当上传按钮被点击时触发            uploadFilesModal: function (e) {                // 阻止默认的链接行为，如果按钮是  标签                e.preventDefault();                // 获取触发点击事件的按钮元素                let clickedButton = $(e.currentTarget);                // 从点击的按钮向上查找最近的 .field_form 容器                // 再从 .field_form 容器向下查找 .dz_params_item 元素                let dropzoneParamEl = clickedButton.closest('.field_form').find('.dz_params_item');                // 获取 data-action_url 属性值                let action_url = dropzoneParamEl.attr('data-action_url');                // 打印调试信息，确认获取到正确的值                console.log("Clicked button:", clickedButton);                console.log("Associated parameters element:", dropzoneParamEl);                console.log("Action URL:", action_url);                // 检查是否已存在Dropzone实例，如果存在则销毁，确保每次打开模态都是新的实例                if ($filesDropzone) {                    $filesDropzone.destroy();                    $filesDropzone = null; // 清空引用                }                // 初始化 Dropzone 之前，确保容器元素存在且可见                // 将 Dropzone 容器添加 'dropzone' 类                $($modalId + ' #filesDropzone').addClass('dropzone');                // 初始化 Dropzone 实例                $filesDropzone = new Dropzone($modalId + ' #filesDropzone', { // 针对模态内的特定ID                    url: action_url, // 使用动态获取的URL                    uploadMultiple: true,                    parallelUploads: $parallelUploads,                    maxFiles: $maxFiles,                    autoProcessQueue: true, // 自动处理上传队列                });                // 绑定 Dropzone 事件处理器                $filesDropzone.on('error', function(file, message, xhr) {                    console.error('Dropzone Error:', message);                    // $(that.$modalId).modal('hide'); // 根据需求决定是否隐藏模态                    alert('文件上传失败: ' + message);                });                $filesDropzone.on('success', function(file, response) {                    console.log('文件上传成功:', file, response);                    // $(that.$modalId).modal('hide'); // 根据需求决定是否隐藏模态                    // 在这里处理上传成功后的逻辑，例如更新页面内容                });                $filesDropzone.on('complete', function(file) {                    // 当文件上传完成（无论成功或失败）时触发                    // 可以选择在这里移除文件缩略图等                    // $filesDropzone.removeFile(file);                });                $filesDropzone.on('queuecomplete', function() {                    // 当所有文件上传完成时触发                    $($modalId).modal('hide'); // 所有文件上传完毕后隐藏模态                });                // 手动显示模态窗口                $($modalId).modal('show');            },            // 当模态窗口隐藏时触发，用于清理 Dropzone 实例            hideUploadFilesModal: function (e) {                if ($filesDropzone) {                    $filesDropzone.destroy(); // 销毁 Dropzone 实例                    $filesDropzone = null; // 清空引用                    // 移除 dropzone 类，以备下次重新初始化                    $($modalId + ' #filesDropzone').removeClass('dropzone dz-started');                     // 清除 Dropzone 容器中的内容，防止残留                    $($modalId + ' #filesDropzone').empty();                }            },        },        // 事件绑定        events: function(){            // 绑定点击事件到所有具有 .btnUpload 类的按钮            this.$body.on('click', '.btnUpload', this.functions.uploadFilesModal.bind(this));            // 绑定模态窗口隐藏事件，用于清理资源            this.$body.on('hidden.bs.modal', $modalId, this.functions.hideUploadFilesModal.bind(this));        },        // 初始化函数        init: function () {            this.cacheDom();            this.events();        }    };    // 启动 $.dispatcherFiles 模块    $.dispatcherFiles.init();})(jQuery);

                                                body {            padding: 20px;        }        .field {            margin-bottom: 30px;            padding: 15px;            border: 1px solid #eee;            border-radius: 5px;            background-color: #f9f9f9;        }        .field_form {            margin-top: 10px;        }        .dz_params_item {            display: none; /* 隐藏参数元素 */        }        #filesDropzone {            min-height: 150px;            border: 2px dashed #0087F7;            border-radius: 5px;            background: white;            padding: 20px;            text-align: center;            font-size: 1.2em;            color: #ccc;        }        #filesDropzone.dropzone-previews {            border: none;            background: transparent;        }    
    
文件上传管理
    
        
            图片上传 (产品A)            
                
            
            
                                     上传产品A图片                                
            
        
    
    
        
            图片上传 (产品B)            
                
            
            
                                     上传产品B图片                                
            
        
    
    
        
            图片上传 (用户头像)            
                
            
            
                                     上传用户头像                                
            
        
    
    
        
            
                
                    上传文件                
                            
            
                
                    
将文件拖放到此处，或点击上传。
                
            
        
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js" integrity="sha512-wV7YjLCoNrWlEJMlnWGjOqfRPIB84YxY4y7tP7f7Q7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f7f