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]);
}
}
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier ist eine Lösung, ein wenig Anpassung wurde gemacht, um Ihre ursprünglichen, um es zu arbeiten, wie Sie wohl bemerken.
CSS
HTML
Javascript
Auf jsfiddle
removeEventListener
. Chrome anscheinend nicht beschweren, aber Firefox nicht. Die geänderte fiddle finden Sie unter jsfiddle.net/6cgTj/23.Das problem mit deinem code ist: readAsDataURL() ist asynchron, Sie sollten warten, bis es fertig Lesen, bevor man sich auf eine zweite Lesung, oder eine neue Instanz durch Aufruf von new FileReader().
Antwort Xotic750 funktioniert, weil er erzeugt einen FileReader für jedes Bild, während Sie nur einen FileReader.
Aber, das benutzen von FileReader, um eine Vorschau der Bilder ist nicht eine gute Wahl, da FileReader.readAsDataURL() konvertiert das gesamte Bild auf eine große Zeichenfolge (in der form "data:image/jpeg;base64,/9j/4SVaRXhpZgAAS......"), und Sie zeigen das Bild, indem Sie die ganze Reihe von Bild-Daten in der Abb.src-Attribut, wenn Ihr Bild ist groß, Sie Gefahr laufen, aus dem Speicher.
img.src ist gedacht, um enthalten die url des Bildes, nicht die Daten des Bildes, aber Sie können zuweisen einer url enthält das ganze Bild-Daten über img.src = "data:image/jpeg;......".
So verwenden, sollten Sie das Fenster.URL.createObjectURL() um eine url zu erstellen, die sich auf Ihrer lokalen Bild, und ordnen Sie diese url auf img.src: