本文将深入探讨在使用Bootstrap模态窗口和Dropzone.js上传文件时，如何正确获取触发按钮关联的数据属性。问题在于，最初的代码尝试在模态窗口的shown.bs.modal事件触发时获取data-action_url，但由于事件触发的时机问题，导致无法正确获取该属性。为了解决这个问题，我们将修改事件绑定方式，并利用jQuery的DOM操作来确保在模态窗口初始化Dropzone实例时，能够准确地获取到所需的URL。
问题分析
原始代码尝试在模态窗口显示后（shown.bs.modal事件）获取data-action_url。然而，此时事件对象e并不指向触发模态窗口的按钮，因此无法通过$(e.currentTarget)来定位到包含data-action_url的元素。
解决方案：使用 click 事件
一个有效的解决方案是将事件绑定到触发模态窗口的按钮的 click 事件上。这样，当用户点击按钮时，我们可以直接访问按钮及其父元素，从而获取到data-action_url。
以下是修改后的代码：
立即学习“Java免费学习笔记（深入）”；
(function($){
let $modalId = '#modal-upload';
let $filesDropzone = null;
let $parallelUploads = 100;
let $maxFiles = 10;
let $files = [];
$.dispatcherFiles = {
cacheDom: function(){
this.$body = $('body');
},
functions: {
uploadFilesModal: function (e) {
$($modalId).modal('toggle');
let that = this;
let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
let action_url = $(dropzoneParamEl).attr('data-action_url');
console.log(dropzoneParamEl);
console.log(action_url);
$($modalId + ' #filesDropzone').addClass('dropzone');
$filesDropzone = new Dropzone($modalId + ' .dropzone', {
url: action_url,
uploadMultiple: true,
parallelUploads: $parallelUploads,
maxFiles: $maxFiles,
});
$filesDropzone.on('error', function() {
$(that.$modalId).modal('hide');
alert('error');
});
$filesDropzone.on('success', function(file, response) {
$($modalId).modal('hide');
});
},
},
events: function(){
this.$body.on('click', '.btnUpload', this.functions.uploadFilesModal.bind(this));
},
init: function () {
this.cacheDom();
this.events();
}
};
$.dispatcherFiles.init();
})(jQuery);代码解释：
- 事件绑定修改： this.$body.on('click', '.btnUpload', this.functions.uploadFilesModal.bind(this)); 将事件绑定到所有class为 .btnUpload 的元素的 click 事件上。
-
uploadFilesModal 函数：
- $(e.currentTarget)：在 click 事件中，e.currentTarget 指向触发事件的按钮（即 .btnUpload 元素）。
- $(e.currentTarget).closest('.field_form').find('.dz_params_item')：通过 closest() 找到最近的父元素 .field_form，然后在其中找到 .dz_params_item 元素。
- $(dropzoneParamEl).attr('data-action_url')：获取 .dz_params_item 元素的 data-action_url 属性值。
- $($modalId).modal('toggle');：手动触发模态框的显示。
HTML 结构：
CSS:
.field {
margin: 50px;
}依赖:
确保引入以下依赖：
总结
通过将事件绑定到 click 事件，并使用 jQuery 的 DOM 操作，我们可以在模态窗口打开之前获取到触发按钮关联的 data-action_url 属性。这使得我们能够在初始化 Dropzone 实例时，使用正确的 URL，从而实现正确的文件上传功能。这种方法确保了代码的可靠性和可维护性，同时也避免了由于事件触发时机问题而导致的数据获取错误。
