Dropzone.js

Question

我正在使用 Dropzone 并尝试将其与普通形式结合使用，所以我阅读了本教程 https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone 是的，我可以成功地做到这一点。但是，我希望其他输入文本字段和提交按钮在表单标记之外（在 dropzone 之外）所以我使用 css position:absolute 文本输入在表单上方，提交按钮在表单下方

但我忘记了如果我 select 上传图片，表单 dropzone 的高度会扩展。所以它失败了。（见截图）

<form id="my-awesome-dropzone" class="dropzone" style="position:relative">
  <div class="dropzone-previews"></div> 

  Username : <input type="text" name="username" style="position:absolute; top:-50px; left:0px; /> <br/>
  Email: <input type="text" name="email" style="position:absolute; top:-40px;left:0px; /> <br/>

  <button type="submit" style="position:absolute;top:100px;left:0px;">Submit data and files!</button>
</form>

我什至将按钮移到窗体外部并使用 html5 属性 form="my-awesome-dropzone" 但它不起作用。我该怎么办？

Answer 1

我认为您的拖放区重叠提交按钮的问题是由于表单具有 style="position:relative" 和按钮具有 style="position:absolute;top:100px;left:0px;"。将它们都删除。

Answer 2

你可以这样做，在表格底部填充 20px，然后将 button 附加到 absolute, bottom: 0px，它会在表格的末尾，即使如果有上传的图片。

$(function(){
  Dropzone.autoDiscover = false;
  
  var myDropzone = new Dropzone("#my-awesome-dropzone", { url: "/file/post"});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script>
<link href="http://www.dropzonejs.com/css/dropzone.css" rel="stylesheet"/>

<form id="my-awesome-dropzone" class="dropzone" style="position:relative; padding-bottom: 30px;">

  <input type="email" name="username" /><br>
  <input type="password" name="password" /><br>

  <div class="dropzone-previews"></div> 
  
  <button type="submit" style="position: absolute; bottom: 0px;">Submit data and files!</button>
</form>

Answer 3

这似乎是一种实现您想要的目标的奇怪方式。我检查了文档，在“提示与技巧”部分 (https://docs.dropzone.dev/misc/tips) 中明确指出，您可以使用 class dz-message 将元素放入 dropzone 元素中，dropzone 不会创建消息为你。所以我建议你像我一样做，在你的提交按钮上方放置以下元素：

<div class="dz-message">
    <div>Upload file here</div>
 </div>

不利的一面是 dictDefaultMessage 没有兑现。

此外，如果 javascript 被禁用，那么 div 仍会显示，在这种情况下将其添加到您的 css:

<noscript>
    <style>
        .dz-message {display:none;}
    </style>
</noscript>

Dropzone.js - 与普通形式合并 - 询问定位

Dropzone.js - Combine with normal form - ask about positioning

html

javascript

css

jquery