web-dev-qa-db-ja.com

画像プレビューにreadAsDataURL（）を使用する

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

    }
}
}
javascriptuploadpreview
9
whitwhoa

これが解決策です。おそらくお気づきかもしれませんが、オリジナルを機能させるためにかなりの調整が行われました。

CSS

div.rounded {
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
}
label {
    display: block;
}
input {
    display: block;
}
#previewTable {
    width: 100%;
}

HTML

<div id="imagesDiv" class="rounded">
    <label for="chooseFiles">Add Images</label>
    <input type="file" id="chooseFiles" multiple="multiple" />
    <table id="previewTable">
        <thead id="columns"></thead>
        <tbody id="previews"></tbody>
    </table>
</div>

Javascript

(function (global) {
    var imagesPerRow = 3,
        chooseFiles,
        columns,
        previews;

    function PreviewImages() {
        var row;

        Array.prototype.forEach.call(chooseFiles.files, function (file, index) {
            var cindex = index % imagesPerRow,
                oFReader = new FileReader(),
                cell,
                image;

            if (cindex === 0) {
                row = previews.insertRow(Math.ceil(index / imagesPerRow));
            }

            image = document.createElement("img");
            image.id = "img_" + index;
            image.style.width = "100%";
            image.style.height = "auto";
            cell = row.insertCell(cindex);
            cell.appendChild(image);

            oFReader.addEventListener("load", function assignImageSrc(evt) {
                image.src = evt.target.result;
                this.removeEventListener("load", assignImageSrc);
            }, false);

            oFReader.readAsDataURL(file);
        });
    }

    global.addEventListener("load", function windowLoadHandler() {
        global.removeEventListener("load", windowLoadHandler);
        chooseFiles = document.getElementById("chooseFiles");
        columns = document.getElementById("columns");
        previews = document.getElementById("previews");

        var row = columns.insertRow(-1),
            header,
            i;

        for (i = 0; i < imagesPerRow; i += 1) {
            header = row.insertCell(-1);
            header.style.width = (100 / imagesPerRow) + "%";
        }

        chooseFiles.addEventListener("change", PreviewImages, false);
    }, false);
}(window));

オン jsfiddle

10
Xotic750

コードの問題は次のとおりです。readAsDataURL（）は非同期です。読み取りが完了するまで待ってから、2番目の読み取りを呼び出すか、new FileReader（）を呼び出して新しいインスタンスを作成する必要があります。

Xotic750による回答は、画像ごとに1つのFileReaderを作成するのに対し、1つのFileReaderのみを使用したために機能します。

ただし、FileReader.readAsDataURL（）は画像全体を大きな文字列（「data：image/jpeg; base64、/ 9j/4SVaRXhpZgAAS...。 。 "）、画像データの文字列全体をimg.src属性に配置して画像を表示すると、画像が大きい場合、メモリが不足するリスクがあります。

img.srcは、画像のデータではなく、画像のURLを含むことを意図していますが、img.src = "data：image/jpeg; ......"を使用して、画像データ全体を含むURLを割り当てることができます。 。

したがって、window.URL.createObjectURL（）を使用してローカルイメージを参照するURLを作成し、このURLをimg.srcに割り当てる必要があります。

...
img.src = window.URL.createObjectURL(fileInput.files[i]);
...
12
Liang Yan