Formular-Upload mit Ajax und Jquery senden

Question

Kann mir jemand helfen, ein Formular mit AJAX einzureichen? Der Zweck des Formulars besteht darin, eine Datei hochzuladen. Das spezifische Problem, das ich habe, ist, wie man die action und enctype Parameter erfasst. Meine Form:

<form role="form" method="post" action="http://localhost:3000/api/some_url" enctype="multipart/form-data"> 
    <input type="file" name="file" id="file"> 
    <input id="submit" type="submit" class="btn btn-primary" value="Submit"> 
</form> 

Ich brauche so etwas wie:

$.ajax({ 

    type: "POST", 
    url: 'http://localhost:3000/api/some_url', 
    action: 'http://localhost:3000/api/some_url', 
    enctype: 'multipart/form-data', 
    headers: { 
      'x-access-token': this.token, 
    }, 
    success: function() { 

    console.log('success!') 
    }, 
    error: function (a, b, c) { 
    console.log(a) 
    console.log(b) 
    console.log(c) 
    } 
}) 

Kann jemand helfen?

Vielen Dank im Voraus!

Answer 1

Geben Sie id Ihr Formular

<form id="frm_upload_image" role="form" method="post" action="http://localhost:3000/api/some_url" enctype="multipart/form-data"> 
    <input type="file" name="file" id="file"> 
    <input id="submit" type="submit" class="btn btn-primary" value="Submit"> 
</form> 

nach dieser Marke folgende Änderungen in Ihrem Ajax-Aufruf

var form = new FormData($("#frm_upload_image")); 
    $.ajax({ 
     url: $("#frm_upload_image").attr('action'), 
     type: "POST",     
     data: form, 
     contentType: false,  
     cache: false,    
     processData:false,         
     success:function() {  
      console.log('success!') 
     }, 
     error: function (a, b, c) { 
      console.log(a) 
      console.log(b) 
      console.log(c) 
     } 
     }); 
}); 

es funktioniert für mich