AJAX Dateiupload (jQuery)

[misterunknown]

Moin,

ich habe im Internet diesen Beitrag gefunden, der einen einfachen Dateiupload mit AJAX (per jQuery) zeigt. Wenn ich genau dieses Skript nehme funktioniert es auch. Allerdings soll das bei mir in eine Funktion, die das Input-Element, in welchem die Datei ausgewählt wird, nicht direkt übergeben kriegt.

Originalcode:

  
$(document.body).on('change', '#ufile', function() {  
   var data = new FormData();  
   data.append('file', this.files[0]);  
   data.append('api', 'uploadFile');  
   data.append('dir', currentDir);  
   $.ajax({  
      url:IFM_SCFN,  
      data:data,  
      type:'POST',  
      processData: false,  
      contentType:false,  
      success: function(evt) { alert(evt); }  
   });  
});

Mein Code:

function uploadFile() {  
   var data = new FormData();  
   data.append('api', 'uploadFile');  
   data.append('file', $("#ufile]").files[0]);  
   data.append('newfilename', $("#uploadFile input[name^=newfilename]").val());  
  
   data.append('dir', currentDir);  
   $.ajax({  
      url: IFM_SCFN,  
      type: "POST",  
      data: data,  
      processData: false,  
      contentType: false,  
      success: function(data) {  
               alert(data);  
               if(data.status == "OK") {  
                  showMessage("File successfully uploaded", "s");  
                  refreshFileTable();  
               } else showMessage("File could not be uploaded: "+data.message, "e");  
            },  
      error: function() { showMessage("General error occured", "e"); }  
   });  
}

Beim Ausführen der Funktion kommt der Fehler

    Cannot read property '0' of undefined  

Das Problem ist, dass wenn ich per jQuery das Input-Feld selektiere ich keine Eigenschaft files habe. Kann mir jemand einen Tipp geben, wie ich das anders selektieren kann, damit es diese Eigenschaft hat?

Grüße Marco

[misterunknown]

Moin,

Kann mir jemand einen Tipp geben, wie ich das anders selektieren kann, damit es diese Eigenschaft hat?

Tja, du Genie, wie kann man denn in JS Elemente selektieren? -.-

Habs hingekriegt. Ganz klassisch per

data.append('file', document.getElementById('ufile').files[0]);  

Hätte man auch beim schreiben drauf kommen können.

Grüße Marco

[unknown]

Das Problem ist, dass wenn ich per jQuery das Input-Feld selektiere ich keine Eigenschaft files habe.

Das "Problem" ist, das jQuery dir ein jQuery-Objekt liefert, du aber das HTMLInputElement möchtest, welches du mit $("#ufile]")[0] bekommst(wenn es vorhanden ist).

[misterunknown]

Moin,

Das "Problem" ist, das jQuery dir ein jQuery-Objekt liefert, du aber das HTMLInputElement möchtest, welches du mit $("#ufile]")[0] bekommst(wenn es vorhanden ist).

Aha, das war mir so nicht bewusst, ergibt aber Sinn.
Wenn ich getElementsByName() nehmen würde, müsste ich ja auch erst das erste auswählen. Danke!

Grüße Marco

[misterunknown]

Moin,

ich habe mal noch ein anderes Problem, bleibe aber mal in dem Thread hier...
Und zwar möchte ich das onkeypress-Event eines Input-Feldes verwenden:

<input type="text" name="newperms" value="644" onkeypress="changePermissions(this, 'dateiname.txt');">  

Soweit funktioniert der Funkionsaufruf. Leider habe ich innerhalb der Funktion changePermissions() dann keine Möglichkeit zu prüfen, welche Taste gedrückt wurde. Wenn ich die Funktion mit changePermissions(e) aufrufe, habe ich zwar das Event übergeben, aber nicht die Elementreferenz. Gibt es eine Möglichkeit sowohl das Event als auch die Elementreferenz zu übergeben?

Grüße Marco

[molily]

Hallo!

Gibt es eine Möglichkeit sowohl das Event als auch die Elementreferenz zu übergeben?

onevent="handler(this, event, 'weitere', 'parameter');"

Das ist allerdings ziemliches Gebastel. Verwende besser JavaScript, um Event-Handler zu registrieren. In der Handler-Funktion hast du Zugriff das Event-Objekt und damit auf sämtliche nötigen Daten. Die Handler-Funktion kann zudem an ein eigenes Objekt gebunden werden, bei dem sämtliche Logik gekapselt ist.

http://molily.de/js/event-handling-grundlagen.html
http://molily.de/js/event-handling-objekt.html
http://molily.de/js/event-handling-objekt.html#currenttarget-target
http://molily.de/js/organisation-verfuegbarkeit.html

Wenn du ohnehin jQuery verwendest, geht die ganze Sache noch einfacher. Du selektierst mit jQuery das fragliche Element und weist mit keypress einen Handler zu. Dieser nimmt das Event-Objekt entgegen, das jQuery schon vereinheitlicht hat.

$('#dasElement').keypress(function(event) {  
  alert(event.target); // Das Element  
  alert(event.keyCode); // Der Key-Code  
});

Grüße,
Mathias

[misterunknown]

Moin,

onevent="handler(this, event, 'weitere', 'parameter');"

Danke ;) Dass Javascript das macht, wenn man direkt event schreibt war mir nicht bekannt. Allerdings hab ich mittlerweile auch herausgefunden, dass man mit event.target auch direkt im Event eine Referenz auf das Element hat.

Das ist allerdings ziemliches Gebastel. Verwende besser JavaScript, um Event-Handler zu registrieren.

Ich weiß, dass man Eventhandler lieber im JS definieren sollte, Stichwort unobtrusive JavaScript. Allerdings funktionieren die "Links" ohne JS sowieso nicht. Von daher dachte ich, kann ich mir das "suchen" des Elements und registrieren des Eventhandlers sparen.

Wenn du ohnehin jQuery verwendest, geht die ganze Sache noch einfacher.

Das stimmt, allerdings haben die Links keine feste ID. Das selektieren würde da schwierig, zumal ich auch diese per JS generiere.

Danke aber, für deine Links! Gerade der Artikel über Organisation von JS ist sehr gut.

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Wenn du ohnehin jQuery verwendest, geht die ganze Sache noch einfacher.

Das stimmt, allerdings haben die Links keine feste ID. Das selektieren würde da schwierig, zumal ich auch diese per JS generiere.

vielleicht liefert Eventhandler für eingefügte Elemente den gewünschten Denkanstoß.

Plasma-Atheist

[molily]

Hallo,

allerdings haben die Links keine feste ID. Das selektieren würde da schwierig, zumal ich auch diese per JS generiere.

Für Event Delegation ist jQuery ebenfalls ausgelegt:

$(document.body).on('keypress', '.permissions', changePermissions);

Das heißt soviel wie: Überwache dokumentweit (document.body) alle keypress-Events und prüfe, ob sie von einem Element mit der Klasse »permissions« kommen. Wenn ja, dann rufe den Handler changePermissions auf. Der bekommt ganz normal das Event-Objekt als Parameter.

http://api.jquery.com/on/

Mathias

[misterunknown]

Moin,

Das heißt soviel wie: Überwache dokumentweit (document.body) alle keypress-Events und prüfe, ob sie von einem Element mit der Klasse »permissions« kommen. Wenn ja, dann rufe den Handler changePermissions auf. Der bekommt ganz normal das Event-Objekt als Parameter.

Das stimmt. Aber ich habe in dem Element mit der Klasse "permissions" (ist ein Input-Feld) nicht alle Informationen stehen, die ich für eine Weiterbearbeitung brauche. Praktisch bedeutet das: Ich könnte zwar mit dem Event-Objekt auf die neuen Rechte, die gesetzt werden sollen, zugreifen, weiß aber nicht, für welche(n) Datei(namen) diese gesetzt werden sollen. Dieser steht in der ersten Tabellenzelle, das Inputfeld befindet sich in irgendeiner Tabellenzelle danach. Ich sage bewusst in _irgendeiner_ da ich nicht weiß, in welcher. Dazwischen sind eventuell einige weitere Zellen mit Eigenschaften der Datei eingeblendet:

| Dateiname | (Downloadlink) | (Dateigröße) | Permissions |

Downloadlink und Dateigröße können da sein, müssen aber nicht.

Grüße Marco