• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Schleife um Funktion zum Bilder hochladen rumbauen

R

rhln

New member
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
 
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!");
      }
    });
  }
});
 
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.
 
ist das Serverscript in der Lage multiple fileuploads zu verarbeiten?
 
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.
 
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);
});
 
Zuletzt bearbeitet:
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.
 
Habe beim Schreiben einer Testdatei noch einen Fehler im Code aus Beitrag #9 (jetzt korrigiert) gesehen.

Hier die Testdatei:
HTML: 
<!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: <input type="text" id="galleryName" placeholder="Gallerienamen eingeben" size="50" />
        <br />
        <br />
        Datei(en) wählen: <input type="file" id="file-chooser" multiple size="50" />
        <br />
        <br />
        Datei(en) hochladen: <input type="button" id="uploadButton" value="Hochladen" />
        <br />
        <br />
    </form>
    <p><strong>Status:</strong> <span id="txtStatus">ready</span></p>
    <p><strong>Galleriename:</strong> <span id="txtGalleryName"></span></p>
    <p><strong>Anzahl der Bilder:</strong> <span id="txtImageCount"></span></p>
    <p><strong>Bild Indexnummer:</strong> <span id="txtImageIndex"></span></p>
    <p><strong>Bild Typ:</strong> <span id="txtImageType"></span></p>
    <p><strong>Bild Name:</strong> <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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben