如何使用 kendo 上传控件预览在 post 之前上传到服务器的多张图片

Question

当上传多张图片时，单张图片效果很好，然后所有图片预览都被最后一张图片预览覆盖这是我的代码，我正在使用 Kendo 上传控件。

 @(Html.Kendo().Upload()
                .Name("files").
                TemplateId("fileTemplate")
                .Async(a => a
                    .Save("Save", "Upload")
                    .Remove("Remove", "Upload")
                    .AutoUpload(false)).Events(events => events.Select("onSelect")))


    <script id="fileTemplate" type="text/x-kendo-template">
        <span class='k-progress'></span>
        <div class='file-wrapper'>
            <img class='file-icon' /> <!-- here im trying to bind the image -->
            <h4 class='file-heading file-name-heading'>Name: #=name#</h4>
            <h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>
                <button type='button' class='k-upload-action'></button>
            </div>
        </script>

<script>
    function onSelect(e) {
        $.each(e.files, function (index, value) {
                    readMultipleFiles(value);
        });
    }

    function readMultipleFiles(file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            // bind the file content
            $("img").attr({ src: e.target.result });
        }
        reader.readAsDataURL(file.rawFile);
    }
</script>

<style scoped>
    .file-icon {
        display: inline-block;
        float: left;
        width: 48px;
        height: 48px;
        margin-left: 10px;
        margin-top: 13.5px;
    }

    #example .file-heading {
        font-family: Arial;
        font-size: 1.1em;
        display: inline-block;
        float: left;
        width: 450px;
        margin: 0 0 0 20px;
        height: 25px;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    #example .file-name-heading {
        font-weight: bold;
    }

    #example .file-size-heading {
        font-weight: normal;
        font-style: italic;
    }

    li.k-file .file-wrapper .k-upload-action {
        position: absolute;
        top: 0;
        right: 0;
    }

    li.k-file div.file-wrapper {
        position: relative;
        height: 75px;
    }
</style>

Answer 1

您错误地将数据应用于所有图像。您必须将图像数据应用于其特定模板的 img 标签。

请在您的代码中更新以下 JS 函数并检查它。如果它不起作用，请告诉我。

function readMultipleFiles(file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var fileobj = file;
        $('.k-file[data-uid="' + fileobj.uid + '"]').find('img').attr({ src: e.target.result });
    }
    reader.readAsDataURL(file.rawFile);
}