javascript - 画像プレビューに readAsDataURL() を使用する

Question

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

一日中これに取り組んでいますが、問題がわかりません。これはおそらく、FileReader オブジェクトがどのように機能するかについての私の狭い理解によるものですが、私がやろうとしているのは、 readAsDataURL() を使用して、ユーザーが選択した画像を取得し、それらをテーブルの画面でプレビューすることです。すべてがマイナスで機能しています...ご想像のとおり...プレビュー...まあまあです。プレビューが機能するので近いと思いますが、セットの最後の画像しか表示されません。たとえば、6 枚の画像をアップロードした場合、3 枚の画像の最初の行が破損し、2 番目の行の最初の 2 枚が破損し、最後の 6 枚目の画像にプレビューが表示されるとします。どんなアドバイスも大歓迎です。また、これが機能すると、他の人が同じことをしようとしているのを助けるかもしれません.

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

    }
}
}