javascript - 如何将 dropzone.js 框放入 html 文件中的现有表单中？

Question

我正在使用 Laravel。我需要将 dropzone.js 图像上传框放入我现有的表单中。通常 dropzone 带有表单标签和 drozone 类，如下所示，

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

但我需要将 dropzone 框添加到现有表单中，并使用一个提交按钮保存所有其他带有图像的数据。你有什么想法来配置这个吗？更新

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  Name: <input type="text" name="name" value="<?php echo $name;?>">
  <span class="error">* <?php echo $nameErr;?></span>
  <br><br>
  E-mail: <input type="text" name="email" value="<?php echo $email;?>">
  <span class="error">* <?php echo $emailErr;?></span>
  <br><br>
  Website: <input type="text" name="website" value="<?php echo $website;?>">
  <span class="error"><?php echo $websiteErr;?></span>
  <br><br>
  Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea>

<div>I need put dropzone here</div>
</form>

Answer 1

Dropzone 是一个可扩展性很强的库。它允许将任何 div 设为拖放区。如果您不想使用表单 - 您可以使用编程方式创建拖放区 -

var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

如果您使用 native JavaScript。如果你使用jquery，你可以使用 -

$("div#myId").dropzone({ url: "/file/post" });