Verwenden von readAsDataURL () für die Bildvorschau

jsFiddle URL:http://jsfiddle.net/Xotic750/AjtLx

Ich habe den ganzen Tag daran gearbeitet und kann das Problem nicht erkennen. Das liegt wahrscheinlich an meinem engen Verständnis der Funktionsweise von FileReader-Objekten. Ich versuche jedoch, mithilfe von readAsDataURL () Bilder abzurufen, die ein Benutzer ausgewählt hat, und sie auf dem Bildschirm in einer Tabelle in der Vorschau anzuzeigen. Alles funktioniert minus ... Sie haben es erraten ... die Vorschau ... na ja. Ich denke, ich bin nah dran, weil die Vorschau funktioniert, ABER es wird nur das letzte Bild des Sets angezeigt. Sagen wir zum Beispiel, wenn ich 6 Bilder hochgeladen habe, dann würde die erste Reihe von 3 Bildern unterbrochen, die zweite Reihe die ersten 2, dann würde das letzte 6. Bild die Vorschau anzeigen ... Jeder Rat wäre sehr dankbar. Sobald dies funktioniert, kann es auch anderen helfen, das Gleiche zu tun, da ich nach einer Lösung für dieses Problem gesucht habe und anscheinend nichts mehr herausfinden kann.

function PreviewImages() {
    var inputID = document.getElementById('input_clone');
    var totalImages = inputID.files.length;
    var imagesPerRow = 3;
    var numRows = totalImages / imagesPerRow;
    var row = "";
    var cell = "";
    var element1 = "";
    var elementID = "";


    for(var i = 0; i < numRows; i++){ //create rows
        row = document.getElementById('image_preview_table').insertRow(i);
        for(var ii = 0; ii < imagesPerRow; ii++){ //create cells
            cell = row.insertCell(ii);
            elementID = "img_" + ii;
            element1 = document.createElement("img");
            element1.name = elementID;
            element1.id = elementID
            cell.appendChild(element1);

            oFReader = new FileReader();

            oFReader.onload = function(oFREvent){
                var dataURI = oFREvent.target.result;
                var image = document.getElementById(elementID);
                image.src = dataURI;
            };

                oFReader.readAsDataURL(document.getElementById("input_clone").files[ii]);

    }
}
}

Antworten auf die Frage(2)

Ihre Antwort auf die Frage