Mit readAsDataURL() für Bild-Vorschau

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

Schon den ganzen Tag und ich sehe nicht das Problem. Es ist wahrscheinlich aufgrund meiner engen Verständnis von, wie FileReader-Objekte arbeiten, sondern das, was ich versuche zu tun, ist mit readAsDataURL (), um Bilder, die ein Benutzer ausgewählt hat, und die Vorschau auf dem Bildschirm in einer Tabelle. Alles minus...Sie Ahnen es...die Vorschau...auch Art. Ich denke, ich bin nah, weil die Vorschau funktioniert, ABER es zeigt nur das Letzte Bild in der Gruppe. Sagen Sie zum Beispiel, wenn ich 6 Bilder hochgeladen, dann die erste Reihe aus 3 Bildern würde gebrochen werden, die zweite Zeile die ersten 2 würde gebrochen werden, dann die Letzte 6. Bild die Vorschau....Irgendwelche Ratschläge sehr geschätzt. Auch, wenn dies funktioniert, könnte es helfen, anderen, die versuchen, das gleiche zu tun, weil ich gesucht habe überall nach einer Lösung für dieses Problem und ich kann nicht scheinen, um zu Graben, nichts bis....

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]);

    }
}
}
Schreibe einen Kommentar