Question

我正在构建一种内部通信工具，用户可以在其中发布评论和附加文件。

我正在使用蓝色imp文件上传器：https://github.com/blueimp/jQuery-File-Upload/

我在这里做了一个jsfiddle：http://jsfiddle.net/denislexic/s56xG/12/

但为了简化，我在这里做了一个摘录：

<form action="/path/to/submit/" method="post" style="padding:10px;">
    <textarea style="display:block; width:60%;"></textarea>


    <form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
        <!-- Blue imp form stuff in here -->
    </form>


    <a href="#" class="btn JS_fileUpload">Attach file</a>
    <button type="submit" class="btn btn-primary">Post</button>
</form>

问题是，在设计方面，我真的需要提交按钮在textarea和文件上传器之后，文件上传器必须在...之间...这意味着我必须有嵌套的表单（这不是不行吗？还有其他解决方案吗？

PS：我看过这个问题，但似乎并不相关：Submitting form located within another form

提前感谢您的帮助。

Answer 1

一种简单的方法是不使用<form>，而是使用另一个元素，例如div：

<div id="fileupload">

您需要更新脚本并设置url参数：

    $('#fileupload').fileupload({
        url: 'http://www.example.com/uploadFile.php',

希望这有帮助。

Answer 2

在维护有效的HTML时，您可以使用CSS来将事物移动到适当的位置：

<style type="text/css">
#container {
  position: relative;
}
#content0 {
  position: absolute;
  top: 0;
  left: 0;
}
#content1 {
  position: absolute;
  top: 3ex;
  left: 0;
  border: 1px solid blue;
  padding: 5px;
}
#sub0 {
  position: absolute;
  top: 8ex;
  left: 0;
}
</style>

<div id="container">

<form>
  <div id="content0">
    <input name="foo">
    <input id="sub0" type="submit"> 
  </div>
</form>

<form>
  <div id="content1">
    <input name="bar">
    <input type="submit" value="Submit this bit"> 
  </div>
</form>

</div>

表单在另一个表单中 - 在另一个表单中使用Blueimp文件上传器

2 个答案: