drag-and-drop - 如何将提交按钮添加到 dropzone

标签 drag-and-drop dropzone.js

大家好,我正在使用 dropzone.js 通过 php 将图片上传到服务器,但我遇到了问题。

我想知道是否有任何方式禁用 dropzone.js 在拖放图像或单击并选择图像时自动上传到服务器并使用可点击的提交按钮手动将图像提交到服务器

请任何建议或帮助,也许一个简单的代码将不胜感激。

已编辑

我的问题还没有得到答案。

说真的,我觉得这个构建这些东西的人并不正确,因为这些东西在某些方面是无用的,他们是不是想告诉我,当用户上传其个人资料图片时,dropzone 将被卡在那里看着他们,他们看着在没有提交按钮或图片已上传的确认消息的情况下,他们应该继续吗?严重地?

最佳答案

您可以在 HTML 表单中定义按钮,例如

<button id="submit-all">Submit all files</button>

然后添加这个脚本
Dropzone.options.myDropzone = {
  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,
  acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
  maxFilesize: 1,
  parallelUploads: 10,
  addRemoveLinks: true,
  init: function() {
    var submitButton = document.querySelector("#submit-all")
    myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); 
      // autoProcessQueue: true// Tell Dropzone to process all queued files.
    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function() {
      // Show submit button here and/or inform user to click it.
    });

  }
};

希望这能解决问题。refrence https://github.com/enyo/dropzone/wiki/Upload-all-files-with-a-button

关于drag-and-drop - 如何将提交按钮添加到 dropzone,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33047408/

相关文章:

android - 是否可以在 Android 浏览器中进行 HTML5 拖放操作?

javascript - 使用createjs调整zindex

javascript - 拖放 - JQuery 插件

jquery - 获取给定 DOM 元素的 Meteor 模板实例

javascript - Dropzone.js v5 不显示服务器中的文件 : Cannot read property 'filename' of undefined

excel - Dropzone 在对话框中仅显示 CSV 和 XLS 文件

javascript - 如何从 Dropzone 的投递箱区域中删除文件?

javascript - Electron Js,拖放,JavaScript

php - 使用 CakePHP 1.3 将图像上传到服务器

javascript - Dropzone.js removedfile 事件回调 - 父 dropzone