Dropzone.js - 结合普通表单 - 询问定位问题

Question

我正在使用 Dropzone 并尝试将其与普通表单结合使用，因此我阅读了这篇教程 https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone ，我成功地实现了它。然而，我希望其他输入文本字段和提交按钮在 form 标签之外（不在 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"，但它没有起作用。我该怎么做？

- doflamingo

---

我认为在这里使用一个小技巧会很好，但从外观上看，如果您删除按钮上的所有内联CSS，当文件添加到dropzone时，它将自动移开。 - Serg Chernata

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>

- Ultrazz008

Answer 2

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

- Serg Chernata

---

如果我删除它，它将会看起来像屏幕截图中的第一个案例。 - doflamingo

@doflamingo 好的，如果你从表单本身中删除 dropzone 类，然后创建一个 div 并将类添加到该 div 中呢？将 dropzone 附加到表单内部的元素而不是整个表单。 - Serg Chernata

我曾经写过你的方法。位置很完美，但是它无法与其他普通表单同时提交。 - doflamingo

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，则该

仍将显示，在这种情况下，请将其添加到您的CSS中：

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

- luke_mclachlan