I add something to your code and it's work.
@(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 #=addExtensionClass(files[0].extension)#'/> <!-- 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>
var a = 0;
function onSelect(e) {
$.each(e.files, function (index, value) {
readMultipleFiles(value);
});
a++;
}
function addExtensionClass(extension) {
return a;
}
function readMultipleFiles(file) {
var reader = new FileReader();
reader.onload = function (e) {
// bind the file content
$('.'+a+'').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>