steffen: Fileupload mit JS "weiterleiten"

SELF-Forum

Fileupload mit JS "weiterleiten"

steffen
– Informationen zu den Bewertungsregeln

Hallo Forumleser,

ich habe ein Formular, dass ich beim abschicken über ein AJAX Request an eine Seite leiten möchte. Auf der anderen Seite muss ich diese Variable mit $_FILES[] abrufen.

Realisieren tue ich das mit JQuery:

$("#cl-entry form").submit(function(event) {  
 // Stops submit action  
 event.preventDefault();  
 var $form = $( this ),  
  image = $form.find( 'input[name="image"]' ).get(0).files[0],  
  url = $form.attr( 'action' );  
  
 // Send the data using post and put the results in a div  
 $.post( url, { image: image} ,  
  function( data ) {  
   $( "#cl-entry" ).html( data );  
  }  
 );  
});

Habe einige Seiten durchgelesen und auch ein paar Beispiele gefunden:

1.) $form.find( 'input[name="image"]' ).send(); // unknown function send auch keine manual dazu gefunden
2.) $form.find( 'input[name="image"]' ).get(0).files[0]; // return object

Jedenfalls habe ich nichts dazu gefunden, was mir helfen könnte.

Könnt ihr mir bitte weiterhelfen?

Danke euch!

Steffen

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Fileupload mit JS "weiterleiten"

    molily
    +3 Informationen zu den Bewertungsregeln

    Hallo,

    Mit dem files-Array beim Dateiauswahl-Formularfeld kannst du erst einmal auf die ausgewählte(n) Datei(en) zugreifen. Und zwar in erster Linie auf deren Metadaten (Name, Größe usw.). files[0] liefert dir ein File-Objekt. Das kannst du nicht als POST-Parameter (application/x-www-form-urlencoded) hochladen, wie du es versuchst.

    Ein Ansatz ist es, den Datei-Inhalt per JavaScript auszulesen und von Hand einen Multipart-HTTP-Request zusammenzubauen. Der erste Teil geht entweder mit getAsBinary oder mit einem FileReader in Verbindung mit sendAsBinary. Der zweite Teil ist vor allem unangenehme Kleinarbeit.

    Ein weiterer Ansatz ist, die Datei mit send(file) binär im POST-Body zu senden. Das ist recht robust, aber serverseitig sehr schwer zu verarbeiten, denn es wird kein klassischer Datei-Upload vorgenommen. $_FILES in PHP bleibt leer.

    Schließlich kann man das File-Objekt in ein FormData-Objekt hängen und dieses an send() von XMLHttpRequest geben. Der Browser erzeugt dann automatisch einen korrekten Multipart-Request.

    Klingt kompliziert? Ist es auch. Die meisten der genannten Techniken sind veraltetet und gelten nur für bestimmte Browserversionen. Die letztgenannte ist die einfachste und zukunftssichere, aber sie wird erst von ein paar neueren Browserversionen unterstützt.

    http://blog.timc.idv.tw/wp-content/uploads/HTML5_AJAX_File_Upload.pdf bietet eine Übersicht, eine Beispielumsetzung für jQuery ist http://timc.idv.tw/html5-file-upload/jquery.html5-fileupload.js. Schließlich gibt es ausgereifte Bibliotheken wie http://www.plupload.com/. Diese macht noch viel mehr. Bilder werden gesondert behandelt, dessen Metadaten werden eingelesen, es sind Vorschaubilder möglich. Dateien werden in Chunks hochgeladen.

    Das ist eine Wissenschaft für sich. Mal so gefragt: Warum willst du dir das antun? Das ist momentan nicht einfach browserübergreifend und zuverlässig umsetzbar bzw. halt nur mit Mega-Bibliotheken wie Plupload, die hauptsächlich auf Flash und mehr nebenbei auf HTML5/JavaScript setzen.

    Mathias

    Beitrag melden
    +3
    Informationen zu den Bewertungsregeln