本教程旨在解决在Bootstrap模态窗口中使用Dropzone.js进行文件上传时，如何获取触发模态窗口的元素上的data-*属性值的问题。我们将探讨如何通过事件委托和$(this)来准确获取所需的数据，并提供完整的代码示例，帮助开发者轻松实现文件上传功能。
在开发Web应用时，经常需要在模态窗口中执行一些操作，例如文件上传。如果需要根据触发模态窗口的元素来动态配置模态窗口的行为，就需要获取该元素上的data-*属性。本教程将以一个使用Dropzone.js进行文件上传的场景为例，详细介绍如何获取触发模态窗口的按钮上的data-action_url属性。
问题背景
假设我们有一个页面，其中包含多个文件上传区域，每个区域都有一个上传按钮，点击按钮会弹出一个模态窗口，用于上传文件。每个上传按钮都关联着一个dz_params_item元素，该元素包含data-action_url属性，用于指定Dropzone.js上传文件的URL。
我们的目标是在模态窗口打开时，获取点击的上传按钮所关联的data-action_url属性，并将其传递给Dropzone.js，以便Dropzone.js能够将文件上传到正确的URL。
解决方案
为了解决这个问题，我们需要使用事件委托和$(this)来获取触发模态窗口的元素。
- 事件委托： 将事件监听器绑定到body元素上，然后使用选择器来过滤事件目标。这样，即使动态添加的元素也能触发事件。
- $(this)： 在事件处理函数中，$(this)指向触发事件的元素，也就是点击的上传按钮。
以下是修改后的代码：
(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) {
// 使用 $(this) 获取点击的按钮元素
let $uploadButton = $(e.currentTarget);
// 找到与按钮关联的 .field_form 元素，然后找到 .dz_params_item 元素
let $dropzoneParamEl = $uploadButton.closest('.field_form').find('.dz_params_item');
// 从 .dz_params_item 元素获取 data-action_url 属性
let action_url = $dropzoneParamEl.attr('data-action_url');
console.log($dropzoneParamEl);
console.log(action_url);
// 打开模态窗口
$($modalId).modal('toggle');
// 初始化 Dropzone.js
$($modalId + ' #filesDropzone').addClass('dropzone');
$filesDropzone = new Dropzone($modalId + ' .dropzone', {
url: action_url,
uploadMultiple: true,
parallelUploads: $parallelUploads,
maxFiles: $maxFiles,
});
$filesDropzone.on('error', function() {
$($modalId).modal('hide');
alert('error');
});
$filesDropzone.on('success', function(file, response) {
$($modalId).modal('hide');
});
},
},
events: function(){
// 使用事件委托，将事件监听器绑定到 body 元素上
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));：这行代码使用事件委托，将click事件监听器绑定到body元素上，并指定选择器为.btnUpload。这意味着，当点击任何具有.btnUpload类的元素时，都会触发uploadFilesModal函数。
- let $uploadButton = $(e.currentTarget);：在uploadFilesModal函数中，e.currentTarget指向触发事件的元素，也就是点击的上传按钮。我们将其包装成jQuery对象，以便后续操作。
- let $dropzoneParamEl = $uploadButton.closest('.field_form').find('.dz_params_item');：这行代码首先使用closest('.field_form')找到上传按钮最近的.field_form父元素，然后使用find('.dz_params_item')找到该父元素下的.dz_params_item子元素。
- let action_url = $dropzoneParamEl.attr('data-action_url');：这行代码从.dz_params_item元素中获取data-action_url属性的值。
完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>Dropzone File Upload</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.css" integrity="sha512-jU/7UFiaW5uWm5Wnq9jPQeMBpjxWsi9mRROCBwalkDzRCwnhXY0UuyBmJlgu6PpyzCnpI0e0UqkCU9IoFGnhvg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.field {
margin: 50px;
}
</style>
</head>
<body>
<div class="form-group">
<div class="field">
<label>Photos</label>
<div class="field_info" data-field_photo_id="5">
<div class="value" data-item_id=""></div>
</div>
<div class="field_form">
<a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
<i class="fa fa-cloud-upload"></i> Upload
</a>
<div class="dz_params_item"
data-entity_id="1"
data-action_url="/files/upload/1"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="field">
<label>Photos</label>
<div class="field_info" data-field_photo_id="6">
<div class="value" data-item_id=""></div>
</div>
<div class="field_form">
<a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
<i class="fa fa-cloud-upload"></i> Upload
</a>
<div class="dz_params_item"
data-entity_id="2"
data-action_url="/files/upload/2"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="field">
<label>Photos</label>
<div class="field_info" data-field_photo_id="7">
<div class="value" data-item_id=""></div>
</div>
<div class="field_form">
<a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
<i class="fa fa-cloud-upload"></i> Upload
</a>
<div class="dz_params_item"
data-entity_id="3"
data-action_url="/files/upload/3"></div>
</div>
</div>
</div>
<div class="modal fade" id="modal-upload" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Upload files
</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fal fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<div id="filesDropzone"></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js" integrity="sha512-U2WE1ktpMTuRBPoCFDzomoIorbOyUv0sP8B+INA3EzNAhehbzED1rOJg6bCqPf/Tuposxb5ja/MAUnC8THSbLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
(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) {
// 使用 $(this) 获取点击的按钮元素
let $uploadButton = $(e.currentTarget);
// 找到与按钮关联的 .field_form 元素，然后找到 .dz_params_item 元素
let $dropzoneParamEl = $uploadButton.closest('.field_form').find('.dz_params_item');
// 从 .dz_params_item 元素获取 data-action_url 属性
let action_url = $dropzoneParamEl.attr('data-action_url');
console.log($dropzoneParamEl);
console.log(action_url);
// 打开模态窗口
$($modalId).modal('toggle');
// 初始化 Dropzone.js
$($modalId + ' #filesDropzone').addClass('dropzone');
$filesDropzone = new Dropzone($modalId + ' .dropzone', {
url: action_url,
uploadMultiple: true,
parallelUploads: $parallelUploads,
maxFiles: $maxFiles,
});
$filesDropzone.on('error', function() {
$($modalId).modal('hide');
alert('error');
});
$filesDropzone.on('success', function(file, response) {
$($modalId).modal('hide');
});
},
},
events: function(){
// 使用事件委托，将事件监听器绑定到 body 元素上
this.$body.on('click', '.btnUpload', this.functions.uploadFilesModal.bind(this));
},
init: function () {
this.cacheDom();
this.events();
}
};
$.dispatcherFiles.init();
})(jQuery);
</script>
</body>
</html>注意事项：
- 确保在引入Dropzone.js之前引入jQuery和Bootstrap.js。
- 根据实际情况修改$modalId、$parallelUploads和$maxFiles等变量的值。
- 在服务器端处理文件上传逻辑。
总结
通过使用事件委托和$(this)，我们可以轻松地获取触发模态窗口的元素上的data-*属性，并将其用于动态配置模态窗口的行为。本教程提供了一个完整的代码示例，帮助开发者快速实现基于Dropzone.js的文件上传功能。这种方法可以应用于各种需要根据触发元素动态配置模态窗口的场景，提高了代码的灵活性和可维护性。
