jQuery: Datei + Daten-Upload mit Blueimp Datei-Upload-Plugin auf Formular senden

Question

Ich verwende Blueimp Datei Upload Plugin zum Hochladen der Datei. Lassen Sie sagen, ich folgende Form haben:

<form id="myForm"> 
    <input type="text" name="n1" /> 
    <input type="text" name="n3" /> 
    <input type="text" name="n3" /> 
    <input type="file" name="files" id="file" style="display: none" multiple/> 
    <button>Upload</button> 
</form> 

Mein Job

Ich möchte Dateien + zum Hochladen von Daten ist bei der Verwendung klicken Hochladen Taste. Ich habe den automatischen Datei-Upload gemacht, d. H. Die Datei direkt nach dem Drag-Drop hochgeladen oder die Datei ausgewählt.

Aber für diese habe ich keine Ahnung, wie zu tun.Kann ich ein einfaches Beispiel für diese Art von Fällen haben?

Answer 1

Sie brauchen etwas wie folgt aus:

var sendData= true; 
$('#file').fileupload({ 
    dataType : 'json', 
    autoUpload : false, 
    add : function(e,data){ 
     $("#myForm button").on("click",function(){ 
      if(sendData){ 
       data.formData = $("#myForm").serializeArray();    
       sendData = false; 
      } 

      data.submit(); 
     }); 
    }, 
    done: function(e,data){ 
     sendData = true; 
    } 
}) 

hier können Sie weitere Informationen über formData

Answer 2

Multi-Datei-Upload, mit Unterstützung für Drag & Drop und Multibrowser Unterstützung finden, ohne einige Tricks nicht möglich ist, .

Mit dem jquery-Datei-Upload-Plugin können Sie autoUpload auf false setzen, die hinzugefügten oder gelöschten Dateien sammeln und dann beim Senden des Formulars die normale Übermittlungsanfrage abbrechen. Stattdessen führen Sie einen einzelnen Ajax-Aufruf durch, der alle Ihre Dateien und den Formularinhalt enthält. Wenn die Ajax-Aufruf zurückgibt können Sie Ihre Ansicht Seite umleiten zurück usw.

var filesList = new Array(); 
$(function() { 
    $('#fileupload').fileupload({ 
     autoUpload: false, 
    }).on('fileuploadadd', function (e, data) { 
     $.each(data.files, function (index, file) { 
      filesList.push(data.files[index]); 
     }); 
    }); 
} 
$("#uploadform").submit(function(event) { 
    if (filesList.length > 0) { 
     event.preventDefault(); 
     $('#fileupload').fileupload('send', {files: filesList}) 
      .complete(function (result, textStatus, jqXHR) { 
       // window.location='back to view-page after submit?' 
      }); 
     } else { 
      // plain default submit 
     } 
    }); 
}); 
[...] 
<form id="uploadform" action="..." method="POST" enctype="multipart/form-data"> 
    <input type="text" name="dummy" placeholder="some other input field"> 
    <input id="fileupload" type="file" name="files" multiple="multiple"> 
</form> 

Ich habe eine voll funktionierende Lösung mit einem Feder Mvc Controller im Detail beschrieben here