使用readAsDataURL（）进行图像预览 [英] Using readAsDataURL() for image preview

问题描述

jsFiddle网址： http://jsfiddle.net/Xotic750/AjtLx

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

整天都在努力，我看不出这个问题。这可能是由于我对FileReader对象如何工作的狭隘理解，但我想要做的是使用readAsDataURL（）来获取用户选择的图像并在表格中在屏幕上预览它们。一切都在减去......你猜对了......预览......好吧。我想我很接近，因为预览会起作用，但它只显示该组的最后一张图像。比如说，如果我上传了6张图片，那么第3行的第3行就会被破坏，第2行会破坏第2行，最后的第6张图片会显示预览....任何建议都非常感谢。此外，一旦这个工作，它可能会帮助其他人尝试做同样的事情，因为我已经搜索了所有这个问题的解决方案，我似乎无法挖掘任何东西....

Been working on this all day and I can't see the issue. It's probably due to my narrow understanding of how FileReader objects work but what I'm trying to do is use readAsDataURL() to obtain images a user has selected and preview them on the screen in a table. Everything is working minus...you guessed it...the preview...well sort of. I'm thinking I'm close because the preview will work, BUT it only displays the last image of the set. Say for example if I uploaded 6 images then the first row of 3 images would be broken, the second row the first 2 would be broken, then the final 6th image would display the preview....Any advice greatly appreciated. Also, once this works it might help others trying to do the same thing because I've searched all over for a solution to this issue and I can't seem to dig anything up....

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

    }
}
}

推荐答案

这是一个解决方案，你可能会注意到对你的原版进行了相当多的调整以使其正常工作。

Here is a solution, quite a bit of adjustment was made to your original to get it to work, as you will probably notice.

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

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

这篇关于使用readAsDataURL（）进行图像预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！