Hallo,
ich habe ein kleines Problem.
ich habe eine kleine Anwendung, die ich mit Ajax steuere.
In meinem HTML Quelltext ist ein Formular, ähnlich wie dieses:
Die Funktion setEdgingNew() fängt das Form ab und macht eventuelle Ausgaben, wenn der Request da ist.
Es wird also das Form, bzw. die Daten an die Funktion AJAXPost() gesendet und dann der Request ausgewertet.
Die Funktion AJAXPost() macht den Hauptteil und da habe ich dann auch mein Problem.
Hier erst mal die Funktion AJAXPost():
Das funktioniert wunderbar. Und vor allem ohne große jQuery oder andere Plugins.
Aber jetzt habe ich ein Formular mit einem FILE Feld. Und da komme ich gerade an meine Grenzen.
Wie bekomme ich in meine Funktion den File-Upload mit rein ohne dass ich doch noch auf Frameworks zurückgreifen muss?
Ich hab da zwar ein paar Ansätze mit jQuery gefunden, aber genau das will ich ja eigentlich nicht.
Ich möchte einfach das FILE Feld in mein Script mit einbinden. Hab das auch was von FormData() gefunden. Daraus wird ich
aber auch nicht schlau.
Ich hab das so gemacht (natürlich mit meinen ID`s):
Da bekomme ich zwar ein FormData Objekt, aber damit kann ich leider nix anfangen.
Ich sehe grade den Wald vor lauter Bäumen nicht. Könnt Ihr mir helfen?
ich habe ein kleines Problem.
ich habe eine kleine Anwendung, die ich mit Ajax steuere.
In meinem HTML Quelltext ist ein Formular, ähnlich wie dieses:
HTML:
<form action='execution/operatorData/edging_types/setEdgingTypes.php?token=".$siteTokenTemp."' name='formChangeEdgeNew' id='formChangeEdgeNewId' method='post' enctype='multipart/form-data'>
<article class='showLeft border_3 backgrund_4'>";
<Input type ........>
<Input type ........>
<Input type ........>
<Input type ........>
<Input type = 'submit' Name = 'senden' value = 'senden' onclick = 'setEdgingNew(\"formChangeEdgeNewId\", this.name, \"edging_new_file_id\");'>
</article>
</form>Die Funktion setEdgingNew() fängt das Form ab und macht eventuelle Ausgaben, wenn der Request da ist.
HTML:
function setEdgingNew(formId, name){
var tempObj3 = AJAXPost(formId, name, 0, 0);
if(tempObj3[0] == "false"){
window.document.getElementById(tempObj3[2]).value = tempObj3[1] + "-> " + tempObj3[3];
window.document.getElementById(tempObj3[2]).className = "errorText1";
}else{
window.document.getElementById(tempObj3[2]).value = tempObj3[1];
window.document.getElementById(tempObj3[2]).className = "okText1";
}
return false;
}Es wird also das Form, bzw. die Daten an die Funktion AJAXPost() gesendet und dann der Request ausgewertet.
Die Funktion AJAXPost() macht den Hauptteil und da habe ich dann auch mein Problem.
Hier erst mal die Funktion AJAXPost():
HTML:
function AJAXPost(formId, name, table, openArray){
var elem = document.getElementById(formId).elements;
var params = "name=" + name + "&table=" + table;
if(openArray != 0){params += "&openArray=" + encodeURIComponent(openArray); }
params += "&";
url = document.getElementById(formId).action;
for(var i = 0; i < elem.length; i++){
if (elem[i].tagName == "SELECT"){
params += elem[i].name + "=" + encodeURIComponent(elem[i].options[elem[i].selectedIndex].value) + "&";
}else{
if(elem[i].type.toUpperCase() == "RADIO" || elem[i].type.toUpperCase() == "CHECKBOX"){
if(elem[i].checked == true){
params += elem[i].name + "=" + encodeURIComponent(elem[i].value) + "&";
}
}else{
if(elem[i].name != ""){
params += elem[i].name + "=" + encodeURIComponent(elem[i].value) + "&";
}
}
}
}
xmlhttp5.open("POST", url, false);
xmlhttp5.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp5.setRequestHeader("Content-length", params.length);
xmlhttp5.setRequestHeader("Connection", "close");
xmlhttp5.send(params);
alert(xmlhttp5.responseText);
var ajaxObj = JSON.parse(xmlhttp5.responseText);
return ajaxObj;
}Das funktioniert wunderbar. Und vor allem ohne große jQuery oder andere Plugins.
Aber jetzt habe ich ein Formular mit einem FILE Feld. Und da komme ich gerade an meine Grenzen.
Wie bekomme ich in meine Funktion den File-Upload mit rein ohne dass ich doch noch auf Frameworks zurückgreifen muss?
Ich hab da zwar ein paar Ansätze mit jQuery gefunden, aber genau das will ich ja eigentlich nicht.
Ich möchte einfach das FILE Feld in mein Script mit einbinden. Hab das auch was von FormData() gefunden. Daraus wird ich
aber auch nicht schlau.
HTML:
var files = document.getElementById('file-input-element').files;
var data = new FormData();
for(var i = 0; i < files.length; i++) data.append('file'+i, files[i]);
xmlhttp5.send(data);
HTML:
xmlhttp5.open("POST", url, false);
xmlhttp5.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp5.setRequestHeader("Content-length", params.length);
xmlhttp5.setRequestHeader("Connection", "close");
var files = document.getElementById('file-input-element').files;
var data = new FormData();
for(var i = 0; i < files.length; i++) data.append('file'+i, files[i]);
xmlhttp5.send(params + data);Ich sehe grade den Wald vor lauter Bäumen nicht. Könnt Ihr mir helfen?
Zuletzt bearbeitet von einem Moderator:
