Fehler beim Hochladen von Dateien mit Jquery & Ajax

Question

Ich versuche, Dateien mit jQuery und AJAX hochzuladen. Ich habe FormData Objekt verwendet, das in HTML5 unterstützt wird. Ich benutze IE11. Unten ist mein Code:

<form id="tradeForm" method="post" action="/trade.action?method=addTrade" enctype="multipart/form-data"> 
    Trade Type : <input type="text" id="tradeType" name="tradeType"> 
    Trade Document : <input type="file" id="attachedFile" name="attachment" size="40"> 
</form> 

Ich habe versucht $.post mit:

$("#tradeForm").submit(function(event){ 
    event.preventDefault(); 
    var form = $(this); 
    var formData = new FormData(form); 
    url = form.attr("action"); 

    $.post(url, formData, function(data) { 
     console.log(data); 
    }); 
}); 

Und auch $.ajax

$("#tradeForm").submit(function(event){ 
    event.preventDefault(); 
    var form = $(this); 
    var formData = new FormData(form); 
    url = form.attr("action"); 

    $.ajax({ 
     url: url, 
     type: "POST", 
     data: formData, 
     processData: false, // tell jQuery not to process the data 
     contentType: false // tell jQuery not to set contentType 
    }).done(function(data) { 
     console.log(data); 
    }); 
}); 

ich folgende Fehlermeldungen erhalten mit:

Argument nicht optional

Wenn $.post Methode

verwendet wird

SCRIPT7002: XMLHttpRequest: Network Error 0x2ef3 konnte der Betrieb nicht vollständig durch 00002ef3

Wenn $.ajax Verfahren verwendet wird, um Fehler. Wie kann ich diese Fehler beheben?

Answer 1

Der FormData-Konstruktor erwartet ein DOMElement, kein jQuery-Objekt. Daher müssen Sie Ihre FormData() Definition ändern. Versuchen Sie folgendes:

$("#tradeForm").submit(function(event){ 
    event.preventDefault(); 
    var $form = $(this); 
    var formData = new FormData($form[0]); // note [0] here 
    url = $form.prop("action"); 

    $.ajax({ 
     url: url, 
     type: "POST", 
     data: formData, 
     processData: false, 
     contentType: false 
    }).done(function(data) { 
     console.log(data); 
    }); 
}); 

Answer 2

Änderung dieser:

var formData = new FormData(form); 

zu

var formData = new FormData(form[0]); 

Als Formdata ein Formular das DOM-Element muss this nicht das jQuery-Objekt $(this)

Answer 3

Ändern Sie die Formularvariablen zu diesem:

var form = document.getElementById('tradeForm'); 
url = $(form).attr("action"); 

Satz der contentType: 'Content-Type: multipart/form-data';

Answer 4

fand ich die Lösung für das Problem. Im Folgenden sind Änderungen vorgenommen:

1. Pass DOM-Element zu Formdata-Konstruktor anstelle von jQuery-Objekt.
   var formData = new FormData (document.getElementById ("tradeForm"));

2. Entfernen Sie das Attribut - enctype = "multipart/form-data" aus dem Formular im HTML.
   Sonst ist es nicht möglich, die Formulardaten serverseitig zu lesen.

3. Verwenden Sie die richtige Server-URL (In meinem Fall war die URL falsch). Die Fehlermeldung - SCRIPT7002: XMLHttpRequest: Netzwerkfehler 0x2ef3, konnte den Vorgang wegen Fehler 00002ef3 aufgrund falscher URL nicht abschließen. Es war irreführend.