So senden Sie zusätzliche Formularfelder mit jQuery-Datei hochladen

Question

Ich benutze jquery Datei hochladen, um Dateien auf Server-Side-Aktion hochzuladen. Ich möchte jedoch auch zusätzliche Formularfelder als Teil des Formulars abschicken. Außerdem möchte ich, dass die Formularübermittlung nur dann erfolgt, wenn auf die Schaltfläche "Senden" geklickt wird.

Ist dies mit jquery-Datei-Upload möglich?

ich eine jsbin erstellt haben: http://jsbin.com/mozujilede/1/edit?html,js,output

Wunschverhalten:

• Benutzer darauf aufmerksam gemacht werden sollten, wenn sie versuchen, mehrere Dateien als zulässige Grenze
• zusätzliche Formulardaten gesendet werden sollen hochladen auf der Serverseite zusammen mit mehreren Dateien
• das Formular absenden sollte nur passieren, wenn Benutzer auf Senden Schaltfläche klickt.

Dies ist, was ich im Moment mache:

var maxFiles = 10; 
$('#fileupload').fileupload({ 
    singleFileUploads: false, 
    url: '/uploadUrl' 
}).bind('fileuploadadd', function (e, data) { 
     var input = $('#input'); 
     data.formData = {example: input.val()}; 
     var fileCount = data.files.length; 
     if (fileCount > maxFiles) { 
      alert("The max number of files is "+maxFiles); 
      return false; 
     } 
    }); 

Answer 1

Probieren Sie diese

var byButton = false; 
 
$("#sub-but").on("click",function(){ 
 
    var inp = $("#files")[0]; 
 
    if(inp.files.length > 10){ 
 
    alert("Max number of files"); 
 
    return false; 
 
    } 
 
    byButton = true; 
 
    $("#myForm").submit(); 
 
}); 
 
function validate(){ 
 
    if(!byButton) 
 
    return false; 
 
    byButton = false; 
 
    return true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm" onsubmit="return validate();"> 
 
    <input type="text" placeholder="some extra items"/> 
 
    <input type="file" id="files" multiple="multiple"/> 
 
    <input type="button" value="Submit" id="sub-but"/> 
 
</form>