2016-05-15 10 views
3

In formdata anhängen Objekt zeigt leer.Formdata-Objekt zeigt leer auch nach Aufruf von append

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     var formy = new FormData(); 
     formy.append("file", $("#file")[0].files[0]); 
     console.log(formy); 
}); 
}); 
</script> 
</head> 
<body> 
<input id="file" type="file" size="40"><br><br> 
<button>Send an HTTP POST request to a page and get the result back</button> 

</body> 
</html> 

Die Ausgabe des obigen Code in das Konsolenprotokoll gibt mir

Formdata{} 
append:function append() 
arguments:null 
caller:null 
length:2 
name:"append" 

während console.log($("#file")[0].files[0]) mich {name: "document.pdf", lastModified: 1462959300000, lastModifiedDate: Wed May 11 2016 15:05:00 GMT+0530 (IST), webkitRelativePath: "", size: 5275…}

Warum hängen Sie ist für Formulardaten nicht funktioniert ergibt Datei?

Antwort

0

Ich denke, das DOM-Dateiattribut hat einen Fehler beim Anhängen und kann daher das Dateiattribut im DOM nicht identifizieren, was den Aufrufer als Null-Ausnahme verursacht. Und auch FormData() muss einen Selektor zurückgeben, der initialisiert wird. Versuchen Sie, diese

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="scripts/jquery-2.2.1.js"></script> 
     <script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
      //var formy = new FormData(); 
      //formy must return valid DOM selector and since our FormData code is unknown,I am using Div as example 
      //formy.append($('input[type="file"]'), $("#file")[0].files[0]); 
      $('#div1').append($('input[type="file"]'), $("#file1")[0].files[0]) 
//Now no null encountered 
// console.log($('div').append($('input[type="file"]'), $("#file1")[0].files[0])); 
    }); 
    }); 
     </script> 
    </head> 
    <body> 
     <input id="file1" type="file" size="40"><br><br> 
     <button>Send an HTTP POST request to a page and get the result back</button> 
     <div id="div1"></div> 
    </body> 
    </html> 

Denn: Datei eine Erweiterung jQuery ist und nicht Teil der CSS-Spezifikation, Abfragen mit: Datei Vorteil der Leistungssteigerung nicht durch den nativen DOM querySelectorAll() -Methode zur Verfügung gestellt nehmen. Für eine bessere Leistung in modernen Browsern verwenden Sie stattdessen [type = "file"]. SRC: jQuery Api Dokumentation

+0

auch das funktioniert nicht. Ich bekomme immer noch Formdata {} –

+0

@KanikaMidha lassen Sie mich wissen, wenn Sie noch Probleme haben. :) –

2

Eigentlich append IS funktioniert. Aber Sie können nicht so loggen. Ihren Inhalt anzeigen zu können, versuchen Sie dies:

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     var formy = new FormData(); 
     formy.append("file", $("#file")[0].files[0]); 

    for(var pair of formy.entries()) { 
     console.log(pair[0]+', '+pair[1]); 
    } 

}); 
}); 
</script> 

Ich habe einen Screenshot von gleichem Code mit 3 Konsole Anweisungen hinzugefügt. Zuerst ist Ihr Dateien [0] Objekt. Zweitens ist Ihr Paar [0] + ',' + Paar 1. Drittens ist Ihr Formularobjekt, das während der Berichterstellung leer ist.

Warum und wie ist das passiert hier lesen. Kein Grund, Theorie hier zu duplizieren.

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

# I have provided description of console statements above

Verwandte Themen