Kendo文件上传器显示以前上传的文件

本文介绍了Kendo文件上传器显示以前上传的文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在使用Kendo File Upload上传文件，上传后我将文件转换为Byte数组并以二进制数据格式保存在数据库中。我的要求是我想在上传的区域显示上传的文件，即我上传文件的区域。（从数据库中获取文件的字节数组内容并将其转换为Base64字符串，这是我做的部分） 我有什么试过： @ *文件上传代码，我在上传区域为显示文件做了哪些更改代码？ I am using Kendo File Upload for upload files and after uploading I convert the file to Byte array and save it on Database in the Binary data format.My requirement is I want to display the uploaded files in the uploaded area,ie the area where I upload files.(Take byte array content of files from database and the convert it into Base64 string thees section is I did)What I have tried:@* The file Upload code,What changes are I done this code for display files in the Uploaded area ? 文件上传示例 File Upload Example < form method =postaction ='@ Url.Action（Save）'> <form method="post" action='@Url.Action("Save")'> < h2> 上传附件 @（Html.Kendo（）。Upload（） .Name（files）。 TemplateId（fileTemplate） 。消息（m => m。选择（在这里添加文件。）） .Async（a => a 。保存（保存，上传） 。删除（删除，上传） .AutoUpload（false））。事件（events => events.Select（onSelect））） < script id =fileTemplatetype =text / x-kendo-template> <h2> Upload Attachments @(Html.Kendo().Upload() .Name("files"). TemplateId("fileTemplate") .Messages(m => m.Select("Add files here.")) .Async(a => a .Save("Save", "Upload") .Remove("Remove", "Upload") .AutoUpload(false)).Events(events => events.Select("onSelect"))) <script id="fileTemplate" type="text/x-kendo-template"> < img class ='file-icon＃= addExtensionClass（files [0] .extension）＃'/> <！ - 这里我试图绑定图像 - > @ * 名称：＃= name＃ 大小：＃= size＃bytes * @ < button type = 'button'class ='k-upload-action'>< / button> <img class='file-icon #=addExtensionClass(files[0].extension)#' /> <!-- here im trying to bind the image --> @*Name: #=name# Size: #=size# bytes*@ <button type='button' class='k-upload-action'></button> < / script> < script> var a = 0; 函数onSelect（e）{ $ .each（e.files，function（index，value）{ readMultipleFiles（value）; }）; a ++; } 函数addExtensionClass（扩展名）{ 返回a; } 函数readMultipleFiles（文件）{ var reader = new FileReader（）; reader.onload = function（e）{ //绑定文件内容 $（'。'+ a +''）。attr（{src：e.target.result}）; } reader.readAsDataURL（file.rawFile）; } < /脚本> < style scoped> .demo-section { 宽度：350px; 浮动：正确; 背景颜色：＃f7f7f7; 填充：20px; border：1px solid＃ dbdbdb; } .demo-section .k-widget.k-upload.k-header { border-radius：0px; border：none; background-color：＃F7F7F7; } .demo-section .k-upload-files { 宽度：100％; 溢出：隐藏; background-color：#fff; border：none; min-height：235px; } .demo-section .k-upload-files .k-file { 宽度：48％; float：left; border：none; padding-left：0px; } .demo-section .k-dropzone { background-color：#fff; border-bottom：none; margin-bottom：30px; } .demo-section .k-dropzone .k-button.k-upload-button { 身高：75px; 边框：1px虚线＃000; 宽度：100％; 背景-color：#fff; border-radius：0px; padding-top：26px; background-position：0px; box-shadow：none; } .demo-section .k-dropzone .k-button.k-upload-button输入{ background-color：#fff; box-shadow：none; } .file-icon { / * display： inline-block; float：left; 宽度：80px; 身高：80px; margin-左：42px; margin-top：45.5px; * / 宽度：自动; 身高：135px; max-height：100％; max-width：100％; } li.k-file .file-wrapper .k-upload-action { position：absolute; top：0; right：0; } li.k-file div .file-wrapper { 位置：相对; 身高：100px; 填充：15px; / *浮动：左; 宽度：50％; * / } < / style> </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> .demo-section{ width: 350px; float: right; background-color: #f7f7f7; padding: 20px; border: 1px solid #dbdbdb; } .demo-section .k-widget.k-upload.k-header{ border-radius: 0px; border: none; background-color: #F7F7F7; } .demo-section .k-upload-files{ width: 100%; overflow: hidden; background-color: #fff; border: none; min-height: 235px; } .demo-section .k-upload-files .k-file{ width: 48%; float: left; border: none; padding-left: 0px; } .demo-section .k-dropzone{ background-color: #fff; border-bottom: none; margin-bottom: 30px; } .demo-section .k-dropzone .k-button.k-upload-button{ height: 75px; border: 1px dashed #000; width: 100%; background-color: #fff; border-radius: 0px; padding-top: 26px; background-position: 0px; box-shadow: none; } .demo-section .k-dropzone .k-button.k-upload-button input{ background-color: #fff; box-shadow: none; } .file-icon { /*display: inline-block; float: left; width: 80px; height: 80px; margin-left: 42px; margin-top: 45.5px;*/ width: auto; height: 135px; max-height: 100%; max-width: 100%; } li.k-file .file-wrapper .k-upload-action { position: absolute; top: 0; right:0; } li.k-file div.file-wrapper { position: relative; height: 100px; padding: 15px; /*float:left; width:50%;*/ } </style> < / form> </form>推荐答案 .each（e.files，function （索引，值）{ readMultipleFiles（value）; }）; a ++; } 函数addExtensionClass（扩展名）{ 返回a; } 函数readMultipleFiles（文件）{ var reader = new FileReader（）; reader.onload = function （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> .demo-section { width： 350px; 浮动：正确; 背景颜色：＃f7f7f7; 填充：20px; border ：1px solid #dbdbdb; } .demo-section .k-widget.k-upload.k-header { border-radius：0px; border：none; background-color：＃F7F7F7; } .demo-section .k-upload-files { 宽度：100％; 溢出：hidd en; background-color：#fff; border：none; min-height：235px; } .demo-section .k-upload-files .k-file { 宽度：48％; float：left; border：none; padding-left：0px; } .demo-section .k-dropzone { background-color：#fff; border-bottom：none; 保证金底部：30px; } .demo-section .k-dropzone .k-button.k -upload-button { 身高：75px; 边框：1px虚线＃000; 宽度：100％; background-color：#fff; border-radius：0px; padding-top：26px; background-position：0px; box-shadow：none; } .demo-section .k-dropzone .k-button.k-upload-button输入{ background-color：#fff; box-shadow：none; } .file-icon { / * display： inline-block; float：left; 宽度：80px; 身高：80px; margin-左：42px; margin-top：45.5px; * / 宽度：自动; 身高：135px; max-height：100％; max-width：100％; } li.k-file .file-wrapper .k-upload-action { position：absolute; 顶部：0; 右：0; } li。 k-file div.file-wrapper { position：relative; height：100px; padding：15px; / *浮动：左; 宽度：50％; * / } < ; / style> ('.'+a+'').attr({ src: e.target.result }); } reader.readAsDataURL(file.rawFile); } </script> <style scoped> .demo-section{ width: 350px; float: right; background-color: #f7f7f7; padding: 20px; border: 1px solid #dbdbdb; } .demo-section .k-widget.k-upload.k-header{ border-radius: 0px; border: none; background-color: #F7F7F7; } .demo-section .k-upload-files{ width: 100%; overflow: hidden; background-color: #fff; border: none; min-height: 235px; } .demo-section .k-upload-files .k-file{ width: 48%; float: left; border: none; padding-left: 0px; } .demo-section .k-dropzone{ background-color: #fff; border-bottom: none; margin-bottom: 30px; } .demo-section .k-dropzone .k-button.k-upload-button{ height: 75px; border: 1px dashed #000; width: 100%; background-color: #fff; border-radius: 0px; padding-top: 26px; background-position: 0px; box-shadow: none; } .demo-section .k-dropzone .k-button.k-upload-button input{ background-color: #fff; box-shadow: none; } .file-icon { /*display: inline-block; float: left; width: 80px; height: 80px; margin-left: 42px; margin-top: 45.5px;*/ width: auto; height: 135px; max-height: 100%; max-width: 100%; } li.k-file .file-wrapper .k-upload-action { position: absolute; top: 0; right:0; } li.k-file div.file-wrapper { position: relative; height: 100px; padding: 15px; /*float:left; width:50%;*/ } </style> < / form> </form> 这篇关于Kendo文件上传器显示以前上传的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！