Ankündigung

Einklappen
Keine Ankündigung bisher.

Fileupload via jQuery realisieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fileupload via jQuery realisieren

    Hey Leute

    Anscheinend ist ein Dateiupload über Ajax bzw. mit Hilfe von jQuery eine knifflige Sache.

    Wenn man danach Googlet handelt auch rund 90% der Ergebnisse von irgendwelchen jQuery Plugins...

    Deshalb frage ich mal hier.

    Wie muss ich (JS o. jQuery - Seitig) vorgehen, wenn ich ein Formular mit einem Uploadfeld habe und dieses an PHP senden möchte damit ich es dort weiter verarbeiten kann?

    Meine ersten und auch einzigen Ansätze waren einfach nur das Uploadfeld auslesen und weitergeben... allerdings kommt man ja mit diesem "Fakepfad" nicht weit.

    Ich glaube die paar Zeilen Code muss ich hier jetzt nicht wiedergeben.

    Habt jemand Tipps?... oder ist das eine größere Sache die mal nicht eben so funzt?

    Viele Dank!

  • #2
    Ist eine große sache, vorallem wenn das ganze Browserübergreifend funktionieren soll musst du verschiedene "Wege" anbieten können. Nutz am besten gleich ein fertiges jQuery-Plugin oder guck dir an wie die das so machen.
    [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

    Kommentar


    • #3
      Naja - es kommt drauf an. Wenn du alte Browser ausschließen kannst wird es einfacher. Hier mal JS-Code aus einer tatsächlichen Anwendung, den ich daher modifizieren musste - hoffe es ist verständlich (Kommentare habe ich gerade schnell reineditiert) und ich habe nichts relevantes entfernt:
      Code:
      if (window.FormData) { // Testen ob FormDate vom Browser supportet wird
          var formData = new FormData();
      
          var fileInput = $('#file').get(0); // #file ist das file input Element
      
          if (fileInput.addEventListener) {
              fileInput.addEventListener('change', function(event)
              {
                  var file = this.files[0]; // Erste Datei nehmen - Multi-Fileupload also hier als nicht aktiv vorausgesetzt
      
                  if (file.type.match(/image.*/)) { // Ggf. (unsichere) Typueberpruefungen machen
                      formData.append('form[file]', file); // Datei an das formData-Objekt anhaengen
                      //formData.append('form[_token]', $('#form__token').val()); // Ggf. CSRF-Token anfuegen
      
                      var url = '...'; // URL fuer den AJAX request
                      jQuery.ajax({
                          type:           'post',
                          url:              url + '/uploadfile',
                          data:           formData,
                          processData:    false,
                          contentType:    false
                      }).done(function(data)
                      {
                          console.log('Success');
      
                      }).fail(function()
                      {
                          console.log('Error - Sorry, your request failed. Please try again');
                      }).done(function()
                      {
                          // ... sontiges
                      });
                  } else {
                      console.log('Error - Please choose an image file.');
                  }
              });
          }
      } else {
          console.log('Error - Your browser does not support the FormDate feature. Uploads are not possible.');
      }
      Vielleicht hilft dir das als Ansatz. Hat in der Entwicklung prima geklappt, wurde allerdings nie im Produktiveinsatz getestet. Als Ausgangspunkt aber womöglich hilfreich.

      Kommentar


      • #4
        Bin da auch eher bei tklausl. V.a. da es hier auch gute Plugins für gibt ohne den IE8 + IE9 auszuschließen. Bspw https://blueimp.github.io/jQuery-File-Upload/
        I like cooking my family and my pets.
        Use commas. Don't be a psycho.
        [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

        Kommentar

        Lädt...
        X