如何在 jQuery 中使拖放区可点击？

Question

在我的 Web 表单应用程序中，我使用了一个放置区，用户将放置文件以上传它们。在移动中，当我将文件拖放到拖放区时，它工作正常，我可以通过单击拖放区下方的按钮轻松上传该文件。

但是，当有人单击拖放区时，我想打开上传文件对话框。如何使拖放区可单击，以便显示上传文件对话框，我可以在其中选择要上传的文件。我搜索了不同的技术，但没有任何效果。有什么方法可以帮助我轻松实现目标？

我的拖放区 HTML 在这里。

<div id="dZUpload" class="dropzone">
 <div class="dz-default dz-message"></div>
</div>

我希望通过 document.ready 中的以下 jQuery 代码来实现这一目标。

              var userEmail = $("#hdnFolderPath").val();
              var uploadButton = document.querySelector("#upload");

              Dropzone.autoDiscover = false;

              $("#dZUpload").dropzone({
                  url: "/ReceiptStorage/Handlers/FileHandler.ashx",
                  params: {
                      DestinationPath: userEmail
                  },
                  autoProcessQueue: false,
                  addRemoveLinks: true,

                  init: function () {
                      var uploadButton = document.querySelector("#upload");
                      var dZUpload = this; //closure

                      dZUpload.on("complete", function (file, response) {
                          if (file.status === 'success') {
                              dZUpload.removeFile(file);
                              LoadFiles($("#hdnFolderPath").val());
                          }
                      });
                      dZUpload.on('error', function (file, response) { 
                      });
                      uploadButton.addEventListener("click", function () {
                          if (dZUpload.files.length > 0)
                              dZUpload.processQueue();
                      });
                  }    
              });

Answer 1

这是用作每个删除文件的模板的 JQuery：

var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
  url: "/target-url", // Set the url
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  autoQueue: false, // Make sure the files aren't queued until manually added
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});

myDropzone.on("addedfile", function(file) {
  // Hookup the start button
  file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
});

// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
  document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});

myDropzone.on("sending", function(file) {
  // Show the total progress bar when upload starts
  document.querySelector("#total-progress").style.opacity = "1";
  // And disable the start button
  file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});

// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
  document.querySelector("#total-progress").style.opacity = "0";
});

// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
  myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actions .cancel").onclick = function() {
  myDropzone.removeAllFiles(true);
};