如何为多个按钮设置一个Dropify输入？

Question

我有一个客户列表和表格，每一行都有一个编辑按钮。我使用一个模式形式来编辑客户信息，我有一个下拉输入字段来改变客户形象。单击“编辑”按钮时，如果存在，我将默认图像设置为“下拉”，模式关闭按钮单击“窗体值”并休息。在那之前一切都还好。当我单击列表上的另一个编辑按钮时，它不会将默认值设置为dropify。你可以在下面检查我的密码。任何人都可以帮忙，我会很高兴的。谢谢。

<div class="modal fade modal-primary" id="editCustomerModal" aria-hidden="true" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" id="closeEditModal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title">Edit Customer</h4>
      </div>
        <div class="modal-body">
          <form class="form-horizontal" id="editCustomer" enctype="multipart/form-data" autocomplete="off">
              <div class="form-group row">
                  <label class="col-xs-12 col-sm-3 form-control-label">Logo:</label>
                  <div class="col-sm-9 col-xs-12">
                      <input type="file" name="image" class="editDropify" />
                  </div>
              </div>
          </form>
        </div>
        <div class="modal-footer p-0">
            <div class="row no-space">
                <div class="col-xs-12 col-sm-6">
                    <button type="button" class="btn btn-danger btn-block h-50 font-size-18" style="border-radius: 0;" data-dismiss="modal"><i class="icon fa-close" aria-hidden="true"></i> İptal </button>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <button type="submit" form="editCustomer" class="btn btn-success btn-block h-50 font-size-18" id="submitEditCustomer" style="border-radius: 0;"><i class="icon fa-save" aria-hidden="true"></i> Kaydet </button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

<script>
        $(document).on('click', '.editButton', function() {

                compLogo = $(this).closest("tr").children("td:eq(3)").children("img").attr("src"),

                editCompId = $(this).data("edit-id");

            $("#editCustomer input[name='which_content']").val(editCompId);

            $("#editCustomerModal").modal({backdrop: "static"});

            $(".editDropify").dropify({defaultFile: compLogo});

        });



        $('#editCustomer')
            .formValidation({
                framework: "bootstrap4",
                button: {
                  selector: '#submitEditCustomer',
                  disabled: 'disabled'
                },
                icon: null,
                fields: {
                   // valiations
                },
                err: {
                  clazz: 'text-help'
                },
                row: {
                  invalid: 'has-danger'
                }
            })

            .on('success.form.fv', function(e) {
                e.preventDefault();

                var formDatas = new FormData($("#editCustomer")[0]);

                $.ajax({
                    type: "POST",
                    url: "editSomething.php",
                    data: formDatas,
                    cache: false,
                    contentType: false,
                    processData: false
                })

            .success(function(editCompId) {
                // success operations and modal close
                $("#editCustomerModal").modal('hide');

                });
            });

        $(document).on('click', '.close', function () {

            // with modal close button clearing dropify element

            var drEvent = $('.editDropify').dropify();
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview(); 
                drEvent.clearElement(); 

            $("#editCustomerModal").modal('hide');
        });
</script>

Answer 1

这里有一个解决办法。

var drEvent = $('#yourInputFileId').dropify(
{
    efaultFile: imagenUrl
});
drEvent = drEvent.data('dropify');
drEvent.resetPreview();
drEvent.clearElement();
drEvent.settings.defaultFile = imagenUrl;
drEvent.destroy();
drEvent.init();