本文将深入探讨在使用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 结构：
<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="<?=$item->request_id?>" data-action_url="/files/upload/<?=$item->request_id?>" ></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="<?=$item->request_id?>" data-action_url="/files/upload/<?=$item->request_id?>" ></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="<?=$item->request_id?>" data-action_url="/files/upload/<?=$item->request_id?>" ></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>
CSS:
.field { margin: 50px; }
依赖:
确保引入以下依赖：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>
总结
通过将事件绑定到 click 事件，并使用 jQuery 的 DOM 操作，我们可以在模态窗口打开之前获取到触发按钮关联的 data-action_url 属性。这使得我们能够在初始化 Dropzone 实例时，使用正确的 URL，从而实现正确的文件上传功能。这种方法确保了代码的可靠性和可维护性，同时也避免了由于事件触发时机问题而导致的数据获取错误。
相关标签：
css javascript java jquery html js bootstrap ajax cdn red JavaScript jquery css bootstrap html class JS 对象 事件 dom this