表 - 用另一种形式

我建立一种内部沟通工具，用户可以发表评论和附加文件内Blueimp文件上传。表 - 用另一种形式

我使用的是蓝色的小鬼文件上传：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

预先感谢任何帮助。

来源

2012-08-10 denislexic

嵌套形式是无效的HTML，所以你需要使用一些CSS来把东西放在一个适当的布局。 – RobG 2012-08-10 02:37:10

你可以乱用CSS来搬东西到一个合适的位置，同时保持有效的HTML：

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

来源

2012-08-10 02:47:07 RobG

这将解决这一问题，同时仍然支持旧的浏览器。但不是每个人都需要支持旧的浏览器，这可能会破坏大多数网站设计，特别是如果他们能够及时做出反应（这是大多数新设计）。我正在寻找Vatentin Despa的解决方案来实现设计目的（尽管它会抛弃一些旧的浏览器支持）。 – 2014-01-24 09:32:57

一个简单的方法是不使用<form>但其他元素，如div：

<div id="fileupload">

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

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

希望这有助于。

来源

2013-07-03 10:00:39

令人惊叹！这是正确的答案。我已经在基本示例（它将ID =“fileuplaod”放在文件输入上，因此您失去了所有BasicPlusUI示例功能）上尝试了很多操作，但是这个简单的解决方案解决了所有问题。 – 2014-01-24 09:29:44

表 - 用另一种形式

回答

相关问题