javascript - Dropzone.js - Combine with normal form - 询问定位

Question

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

但我忘记了如果我选择图片上传，表单拖放区的高度将会扩展。所以它失败了。 (见截图)

<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 , 它会在表单的末尾，即使有上传的图片。

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