Ergebnis 1 bis 11 von 11
Like Tree4Likes
  • 1 Post By miniA4kuser
  • 1 Post By miniA4kuser
  • 1 Post By andreax
  • 1 Post By miniA4kuser

Thema: Schleife um Funktion zum Bilder hochladen rumbauen

  1. #1
    rhln ist offline Grünschnabel
    registriert
    09-05-2017
    Beiträge
    5

    Schleife um Funktion zum Bilder hochladen rumbauen

    Hallo zusammen,

    ich baue derzeit an einer Anwendung, die bei AWS in S3 gespeichert und ausgeführt wird, an sich in HTML in Verbindung mit JavaScript erstellt wurde. Dabei kann der Anwender ein Bild von seinem Rechner hochladen, welches dann in S3 in einem von ihm vorher angegebenen Ordner (gallery) gespeichert wird. Die Funktion dazu habe ich, sie funktioniert auch wie sie soll. Allerdings möchte ich nun, dass der Anwender mehrere Bilder zeitgleich hochladen kann. In HTML habe ich die Option multiple beim input-Feld schon hinterlegt und ich kann mir die Anzahl der ausgewählten Dateien durch files.length ausgeben lassen, aber ich weiß nicht wie ich eine Schleife um meinen Hochladen-Block bauen kann, so dass das Hochladen so lange wiederholt wird wie Dateien ausgewählt wurden.

    Hier der Codeausschnitt des Hochladens:
    Code:
    uploadButton.addEventListener('click', function() {
      var fileChooser = document.getElementById('file-chooser');
      var file = fileChooser.files[0];
    
      if (!file) {
        alert("You must choose a file to upload!");
        return;
      }
    
      if (file.type.indexOf("image") == -1) {
        alert("You may only upload images");
        return;
      }
    
      var galleryName = getGalleryName();
      if (!galleryName) {
        alert("You need to enter a gallery name");
        return;
      }
    
      // Specify the S3 upload parameters
      var params = {
        Key: galleryName + '/' + file.name,
        ContentType: file.type,
        Body: file,
        ACL: 'public-read'
      };
    
      // Upload the file
      S3.upload(params, function(err, data) {
        if (err) {
          alert(err);
        } else {
          alert("Image uploaded successfully!");
        }
      });
    });
    Ausprobiert habe ich bisher sowas
    Code:
    fileChooser.files.forEach(function(file)
    und sowas
    Code:
    for (i = 0; i < this.files.length; ++i) {
    Hat jemand vielleicht eine Ahnung wie ich das lösen kann? Eigentlich dürfte es ja nicht so schwer sein das Auslesen der Anzahl der ausgewählten Dokumente mit einer Schleife zu verknüpfen, aber irgendwie hab ich da nen Denkfehler


    LG rhln

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.706

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    * freigeschaltet *
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    Code:
    uploadButton.addEventListener('click', function() {
      var fileChooser = document.getElementById('file-chooser');
      var files = fileChooser.files;
    
      var galleryName = getGalleryName();
      if (!galleryName) {
        alert("You need to enter a gallery name");
        return;
      }
      
      if (files.length === 0) {
        alert("You must choose a file to upload!");
        return;
      }
    
      for (var i = 0; i < files.length; i++) {
        if (files[i].type.indexOf("image") == -1) {
          alert("You may only upload images");
          return;
        }
      
        // Specify the S3 upload parameters
        var params = {
          Key: galleryName + '/' + files[i].name,
          ContentType: files[i].type,
          Body: files[i],
          ACL: 'public-read'
        };
      
        // Upload the file
        S3.upload(params, function(err, data) {
          if (err) {
            alert(err);
          } else {
            alert("Image uploaded successfully!");
          }
        });
      }
    });
    rhln likes this.
    Hoffe ich konnte helfen

  4. #4
    rhln ist offline Grünschnabel
    registriert
    09-05-2017
    Beiträge
    5

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    Hallo,

    danke für deine Antwort. Ich habe es gerade mal ausprobiert und jetzt lässt sich überhaupt keine Datei mehr hochladen, vorher ging es ja mit einer. Wie gesagt eigentlich müsste es doch recht einfach sein die ausgelesene Anzahl der ausgewählten Dateien zum Hochladen mit dem Vorgang selber in eine Schleife zu werfen aber ich kriege es einfach nicht hin. Das Ergebnis ist immer, dass dann garnichts mehr geht.

  5. #5
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    rhln likes this.
    Hoffe ich konnte helfen

  6. #6
    rhln ist offline Grünschnabel
    registriert
    09-05-2017
    Beiträge
    5

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    In der Fehlerkonsole habe ich dies:

    js forum2.jpg
    Angehängte Grafiken Angehängte Grafiken

  7. #7
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    ist das Serverscript in der Lage multiple fileuploads zu verarbeiten?
    rhln likes this.

  8. #8
    rhln ist offline Grünschnabel
    registriert
    09-05-2017
    Beiträge
    5

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    Ach Herjeh, von der Seite her habe ich das noch gar nicht betrachtet, danke für den Hinweis. Tatsächlich kann bei S3 immer nur eine Datei zeitgleich hochgeladen werden. Das heißt ich komme aus der Nummer wohl so nicht raus. Wobei ich mich frage ob es dann mit mehreren Upload-Feldern funktionieren würde weil es dann trotzdem nur eine Datei pro Feld ist.

  9. #9
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    Na dann mit dieser quick'n'dirty Idee (ungetestet):
    Code:
    function uploadImages(files, galleryName, currentImage, maxImages) {
      if (currentImage < maxImages) {
        // Specify the S3 upload parameters
        var params = {
          Key: galleryName + '/' + files[currentImage].name,
          ContentType: files[currentImage].type,
          Body: files[currentImage],
          ACL: 'public-read'
        };
      
        // Upload the file
        S3.upload(params, function(err, data) {
          if (err) {
            alert(err);
          } else {
            alert("Image uploaded successfully!");
            currentImage = currentImage + 1;
            uploadImages(files, galleryName, currentImage, maxImages);
          }
        });
      }
    }
    
    uploadButton.addEventListener('click', function() {
      var fileChooser = document.getElementById('file-chooser');
      var files = fileChooser.files;
      var galleryName = getGalleryName();
    
      if (!galleryName) {
        alert("You need to enter a gallery name");
        return;
      }
      
      if (files.length === 0) {
        alert("You must choose a file to upload!");
        return;
      }
    
      for (var i = 0; i < files.length; i++) {
        if (files[i].type.indexOf("image") == -1) {
          alert("You may only upload images");
          return;
        }
      }
    
      uploadImages(files, galleryName, 0, files.length);
    });
    Geändert von miniA4kuser (15-05-2017 um 16:29 Uhr) Grund: Fehler im Code beseitigt.
    rhln likes this.
    Hoffe ich konnte helfen

  10. #10
    rhln ist offline Grünschnabel
    registriert
    09-05-2017
    Beiträge
    5

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    Hallo,

    danke dir für deine Idee aber auch da geht dann gar nichts mehr. Offensichtlich geht es einfach nicht mit den Mitteln, mit denen ich arbeite.

  11. #11
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: Schleife um Funktion zum Bilder hochladen rumbauen

    Habe beim Schreiben einer Testdatei noch einen Fehler im Code aus Beitrag #9 (jetzt korrigiert) gesehen.

    Hier die Testdatei:
    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
        <title>Input files</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    
    <body>
        <form id="uploadForm">
            Galleriename:&nbsp;<input type="text" id="galleryName" placeholder="Gallerienamen eingeben" size="50" />
            <br />
            <br />
            Datei(en)&nbsp;wählen:&nbsp;<input type="file" id="file-chooser" multiple size="50" />
            <br />
            <br />
            Datei(en)&nbsp;hochladen:&nbsp;<input type="button" id="uploadButton" value="Hochladen" />
            <br />
            <br />
        </form>
        <p><strong>Status:</strong>&nbsp;<span id="txtStatus">ready</span></p>
        <p><strong>Galleriename:</strong>&nbsp;<span id="txtGalleryName"></span></p>
        <p><strong>Anzahl der Bilder:</strong>&nbsp;<span id="txtImageCount"></span></p>
        <p><strong>Bild Indexnummer:</strong>&nbsp;<span id="txtImageIndex"></span></p>
        <p><strong>Bild Typ:</strong>&nbsp;<span id="txtImageType"></span></p>
        <p><strong>Bild Name:</strong>&nbsp;<span id="txtImageName"></span></p>
    
        <script>
        var S3 = {
            upload: function (params, callback) {
                alert('Key: '+params.Key+'\n\nContenType: '+params.ContentType+'\n\nBody: '+params.Body+'\n\nACL: '+params.ACL);
                window.setTimeout(function () {
                    if (callback && typeof(callback) === 'function') {
                        // execute the callback, passing parameters as necessary
                        callback();
                    }
                }, 2000);
            },
            info: function () {
                alert('S3 Version: TEST');
            }
        };
    
        function getGalleryName() {
            return document.getElementById('galleryName').value;
        }
    
        function uploadImages(files, galleryName, currentImage, maxImages) {
            if (currentImage < maxImages) {
                // Specify the S3 upload parameters
                var params = {
                    Key: galleryName + '/' + files[currentImage].name,
                    ContentType: files[currentImage].type,
                    Body: files[currentImage],
                    ACL: 'public-read'
                };
    
                document.getElementById('txtImageIndex').innerHTML = currentImage + 1;
                document.getElementById('txtImageType').innerHTML = files[currentImage].type;
                document.getElementById('txtImageName').innerHTML = files[currentImage].name;
    
                // Upload the file
                S3.upload(params, function(err, data) {
                    if (err) {
                        alert(err);
                    } else {
                        alert('Bild ' + (currentImage + 1) + ' erfolgreich hochgeladen.');
                        currentImage = currentImage + 1;
                        uploadImages(files, galleryName, currentImage, maxImages);
                    }
                });
            } else {
                document.getElementById('txtStatus').innerHTML = 'DONE';
                alert('Upload abgeschlossen');
            }
        }
    
        document.getElementById('uploadButton').addEventListener('click', function() {
            var fileChooser = document.getElementById('file-chooser');
            var files = fileChooser.files;
            var galleryName = getGalleryName();
    
            if (!galleryName) {
                document.getElementById('txtStatus').innerHTML = 'ERROR: Es muss ein Galleriename eingegeben werden !!!';
                alert('Es muss ein Galleriename eingegeben werden !!!');
            return;
            }
    
            if (files.length === 0) {
                document.getElementById('txtStatus').innerHTML = 'ERROR: Es muss mindestens eine Datei ausgewählt werden !!!';
                alert('Es muss mindestens eine Datei ausgewählt werden !!!');
            return;
            }
    
            for (var i = 0; i < files.length; i++) {
                if (files[i].type.indexOf("image") == -1) {
                    document.getElementById('txtStatus').innerHTML = 'ERROR: Es dürfen NUR Bilder hochgeladen werden !!!';
                    alert('Es dürfen NUR Bilder hochgeladen werden !!!');
                    return;
                }
            }
    
            document.getElementById('txtStatus').innerHTML = 'upload...';
            document.getElementById('txtGalleryName').innerHTML = galleryName;
            document.getElementById('txtImageCount').innerHTML = files.length;
    
            uploadImages(files, galleryName, 0, files.length);
        });
    
        document.getElementById('uploadForm').reset();
        S3.info();
        </script>
    </body>
    </html>
    Hoffe ich konnte helfen

Ähnliche Themen

  1. Webseite mit einer Funktion hochladen
    Von Grobian im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 15-05-2013, 16:07
  2. Bilder hochladen mit HTML,PHP...??
    Von Okyo im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 20-02-2010, 14:57
  3. Bilder-Schleife mit Preload
    Von lupo97 im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 27-01-2007, 16:38
  4. bilder mit for-schleife vorladen
    Von czc im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 24-08-2006, 09:46
  5. 30 St. 2,6 MB grosse Bilder hochladen wo?
    Von bine im Forum Smalltalk
    Antworten: 11
    Letzter Beitrag: 04-06-2006, 17:37

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •