مشکل در نمایش تصاویر قبل از آپلود با Kendo ui Upload

[rayangostar_co]

با سلام
من با استفاده از کد زیر با استفاده از Template کندو تصاویر انتخاب شده رو نمایش میدم . ولی نمیدونم چرا بین تصاویر آخرین تصویر رو برا همه سطرها تکرار میزنه!
لطفا اگه کسی میتونه کمک کنه. با تشکر.
اینم کدش:




@(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>

<stylescoped> .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>