7

私はフォームを持っています:

  <div class="row-fluid">

    <div class="span5 row-fluid" id="description" style="margin-left:0px;">
      <div>
          <label>Title</label>
          <input class="span12" type="text" placeholder="Title" id="description_title" name="description_title"/>
          <label>Author</label>
          <input class="span12" type="text" placeholder="Author" id="description_author" name="description_author"/>
          <label>Tags</label>
          <input class="span12" type="text" placeholder="Tags" id="description_tags" name="description_tags"/>
          <label>Description</label>
          <textarea class="span12" id="description_textarea" name="description_textarea" rows="5" style="resize:none"></textarea>

          <div id="buttons" class="row-fluid" style="margin-top: 5px">
              <div class="span12">
                <span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files
                  <input id="filechose_button" type="file" name="fileData" data-url="http://localhost:3001/upload/1234567890"/></span>
                <button id="upload_button" type="submit" name="upload" class="span5 offset2 btn btn-success" disabled="true" onclick="$('#upload_form').trigger('upload_fired');">upload</button>
              </div> <!-- span12 -->
          </div> <!-- buttons -->
      </div> <!-- well -->
    </div> <!-- video_description -->
  </div> <!-- row-fluid -->

ファイルを選択した後、AJAX を使用してすべての入力フィールドとファイルをfilechose_button有効にして送信できるようにJQuery アップロード プラグインを統合するにはどうすればよいですか。upload_button

アップロード用のjsは次のとおりです。

$(function () {
    $('#filechose_button').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('#upload_button');
                $('#upload_button').click(function () {
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

それでもAJAXを使用せずにデータを送信します

4

2 に答える 2

5

<button>問題は、フォームの要素のデフォルトの動作でした。属性を削除してtype="submit"も何も変わりません。したがって、自分の関数をトリガーする代わりに、通常のリクエストを介してbutton送信します。formPOST

于 2013-04-28T22:28:00.997 に答える
2

@Pere: フォームでボタンを使用しないようにしてください。ブートストラップ btn クラスで div を使用して解決しました。これは私のJavaScriptコードです:

//this should not be a <button></button>, but a div
var submitbtn = $("#submitbtn");


//upload an image && form submission
        $('#avatar').fileupload({
            singleFileUploads: true,
            multipart        : true,
            dataType         : 'json',
            autoUpload       : false,
            url              : 'yourEndpoint',
            type             : 'POST',
            add              : function (e, data) {
                submitbtn.on("click", function () {

                    data.formData = $("#form-activate-user").serializeArray();
                    data.submit();


                });
            },
            done             : function (result) {}
            },
            fail             : function (e) {}
于 2015-06-04T11:37:59.890 に答える