2

私は、ユーザーがコメントを投稿したりファイルを添付したりできる、一種の内部コミュニケーションツールを構築しています。

私は青い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>

問題は、デザイン的には、[送信]ボタンをテキストエリアとファイルアップローダーの後ろに配置する必要があり、ファイルアップローダーはその間にある必要があるということです。つまり、ネストされたフォームが必要です（これはそうではありません）。動作しません）？別の解決策はありますか？

PS：私はこの質問を見ましたが、関連性がないようです：別のフォーム内にあるフォームを送信する

助けてくれてありがとう。

4

2 に答える 2

3

簡単な方法の 1 つは、次<form>のような別の要素を使用せずに使用することdivです。

<div id="fileupload">

urlスクリプトを更新してパラメーターを設定する必要があります。

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

お役に立てれば。

于 2013-07-03T10:00:39.660 に答える
1

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-10T02:47:07.890 に答える