如何仅使 Dropzone.js 预览 Div 可点击而不是整个表单

Posted 2023-03-22

【中文标题】如何仅使 Dropzone.js 预览 Div 可点击而不是整个表单

【英文标题】：How to make only the Dropzone.js Previews Div clickable and not the whole form

【发布时间】：2014-04-06 13:13:12

【问题描述】：

我必须使用 dropzone.js 表单，它将一些输入和文件上传信息发送到另一个页面。

我的 dropzone 代码如下所示 -- >

Dropzone.options.mydropzone = 
  maxFiles: 1,
  maxFilesize: 10, //mb
  acceptedFiles: 'image/*',
  addRemoveLinks: true,
  autoProcessQueue: false,// used for stopping auto processing uploads
  autoDiscover: false,
  paramName: 'prod_pic',
  previewsContainer: '#dropzonePreview', //used for specifying the previews div
  clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box

  accept: function(file, done) 
    console.log("uploaded");
    done();
   //used for enabling the submit button if file exist 
    $( "#submitbtn" ).prop( "disabled", false );
  ,

  init: function() 
    this.on("maxfilesexceeded", function(file)
        alert("No more files please!Only One image file accepted.");
        this.removeFile(file);
    );
      var myDropzone = this;
    $("#submitbtn").on('click',function(e) 
       e.preventDefault();
       myDropzone.processQueue();

    );

       this.on("reset", function (file)    
              //used for disabling the submit button if no file exist 
              $( "#submitbtn" ).prop( "disabled", true );
        );

  

;

但我只想将 Previews 容器设置为 Clickable 和 Drag and Drop ，这是我使用 previewsContainer: '#dropzonePreview' 设置的，但不是整个表单。

如果我使用clickable:false，我将无法单击预览 div 以显示文件上传对话框，即使我将文件拖放到表单上的任何位置也是如此。我不希望这种情况发生，我只想拖放预览容器并且可点击，但同时如果我点击提交，则必须上传整个表单。

我已经阅读了这个 dropzone 教程Combine normal form with Dropzone，但这只是我真正想做的一半。

我们有什么方法可以有效地使用 Dropzone 实现所有这些吗？

【参考方案1】：

我也一直在研究这个问题，最后在bootstrap 页面上偶然发现了答案。

关键是将clickable: 选项设置为您希望您的活动 Dropzone 区域位于的任何位置。使用您的示例，如果您希望预览区域也成为您的拖放/单击区域，请设置clickable:'#dropzonePreview',，这将使该区域处于活动状态。如果您还希望在其中显示“Drop Files”图像，请使用：

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

这允许您使用单个 Dropzone 表单（因此所有字段都作为一个提交），同时仍然允许您指定一个较小的区域用于放置/单击。

请注意，不要让它太小，就像你拖放到区域之外它会在浏览器中加载图像而不是页面。

【讨论】：

感谢刚刚添加 clickable:'#dropzonePreview' 就像魔术一样工作。但是我认为将 dz-message 类添加到预览 div 会使其不可见（显示：无）所以我删除了该类。我的 div 现在看起来像这样 <div id = "dropzonePreview" class="dropzone-previews dz-default"></div>

仅供阅读本文的其他人参考，此解决方案似乎仅在为 clickable 提供 ID 时才有效。如果您尝试使用类进行设置，它将无法正常工作

^ 那是您的特定配置的错误。将类添加为“可点击”效果很好。

我对类也有同样的问题，如果元素有 ID，则只能将元素添加为可点击。

@ChaosTheory - 如何将 dropzone 集成到 bootstrap markdown 编辑器中？

【参考方案2】：

或者，您可以通过编程方式创建拖放区（即使在非 表单元素）通过实例化 Dropzone 类 http://www.dropzonejs.com/#toc_4

您需要将 dz-clickable 类添加到您想要的元素。

HTML

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Drop files here to upload</span>
    </div>
</div>

JavaScript

// Dropzone class:
var myDropzone = new Dropzone("div#myDrop",  url: "/file/post");

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone( url: "/file/post" );

注意

如果您收到控制台错误消息：Dropzone already attached，请确保在启动新的 Dropzone 对象之前添加此行。

Dropzone.autoDiscover = false;

【讨论】：

我只想让 previewsContainer 可点击。整个表单不能是可点击的。我尝试将 dz-clickable 类添加到 previewsContainer div 但没有用。

我知道，但我想以表单提交文件和输入。您的示例只会提交文件而不是输入，不是吗？

嗨，你能告诉我在 url url: "/file/post" 中传递什么

@mlets3113858 url：保存处理图片上传的服务器端路由。如果你有一个 php 脚本，它可能是 example.com/app/upload.php 或类似的东西。

@Xhezairi 感谢您给我这个想法 :)

【参考方案3】：

文档说要设置选项：“clickable: true”，但是...

我的问题是我在上传表单（框）中添加了可见标记。如果您希望框中的每个点都是可点击的，则不能在视图中包含任何其他可见标记，您需要将其添加到选项“dictDefaultMessage”中。

【讨论】：

亲爱的艺术，你能添加一些代码来说明你的答案吗？