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

Question

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

但我忘了，如果我选择图片上传表格，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

您可以这样做，20px填充到底部的表单，并将button追加到absolute, bottom: 0px，它将在表单的末尾，即使有＆ ＃39;上传的图片。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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