Wie kann ich eine Datei hochladen + der Formular-Daten mit blueimp ist JQuery File Upload mit Ajax, nicht einfach POSTEN?

Ich habe ein Formular:

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

Wie kann ich die Integration einer JQuery-Upload-Plugin in der Weise, dass nach Wahl einer Datei mit filechose_button ich kann damit die upload_button und senden Sie alle Eingabefelder und die Datei(en) unter Verwendung von AJAX, nicht wie es funktioniert, jetzt nur noch ein Neuladen der Seite nach einem POST-request.

den js für den upload ist:

$(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.');
        }
    });
});

aber noch immer sendet er die Daten nicht verwenden AJAX

  • Sie können fileupload zu geben beide fileupload und zusätzliche Formulardaten: github.com/blueimp/jQuery-File-Upload/wiki/...
  • 🙂 Ich kam von dieser Seite. Ich schrieb diesen code nach dem Lesen das Handbuch, aber ich habe ein problem, dass das Formular gesendet wird synchron, nicht als AJAX. Die data.submit(); führt nicht über AJAX
  • Anstelle der Schaffung von fileupload gegen ein Eingabefeld, sollten Sie wickeln Sie Ihre Eingaben in einem Formular und erstellen Sie fileupload gegen die id des Formulars.
  • schon probiert, der gleiche Effekt...
  • gibt es irgendwelche parameter, um zu sagen, dass die jquery-file-upload-plugin zu senden, das Formular asynchron? Da gibt es Beispiele für das senden von input-Felder per AJAX, aber nicht die komplette form mit vielen Eingabefeldern. Zumindest ist es nicht explizit erwähnt wird, dass es ist alles über das AJAX-Formular hochladen
  • Statt data.submit(); Sie tun können $(this).fileupload('send', data);
  • klingt gut, aber noch keine Wirkung
  • Gelöst! Der Standardwert für das type-Attribut des button-elements ist auf "abschicken". Es ist ein bisschen komisch für mich: ich explizit entfernt dieses tag denken, als der button tut nichts, aber triggering meine eigene Funktion, und nicht alles auf einmal Einreichen des Formulars standardmäßig. Danke für diese Diskussion, das war wirklich nötig, das zu finden, was das problem wirklich ist!
  • Sorry, aber könntest du etwas näher auf deine "Antwort"? Könnte Sie buchen den eigentlichen source-code? Ich verstehe nicht, wenn Sie endlich gelöst hat, oder wenn Sie dem Schluss, dass Sie nicht senden Sie Ihr Formular durch ajax aufgrund der Schaltfläche wird ein "submit" ein. Ich bin versucht, etwas ähnliches zu tun, aber ich sehe mehrere Probleme in deinem code und meinem eigentlichen Ansatz ist ganz anders...

InformationsquelleAutor static | 2013-04-28
  1. 5

    Das problem war das Standard-Verhalten der <button> element der form. Das entfernen des Attributs type="submit" nichts ändern. Also anstatt der auslösenden meine eigene Funktion, die button senden Sie die form über normalerweise POST Anfrage.

    • oder Sie können einfach fügen Sie type="button"
    InformationsquelleAutor static
  2. 2

    @Pere: Stellen Sie sicher, dass Sie verwenden Sie keine Schaltflächen im Formular. Ich löste es durch die Verwendung von div ' s mit der bootstrap-btn-Klasse. Das ist mein javascript code:

    //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) {}
    InformationsquelleAutor jo v
Schreibe einen Kommentar