Kendo文件上传器显示以前上传的文件 [英] Kendo file uploader to display previously uploaded files
问题描述
我正在使用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")'>
上传附件
@（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>
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;
} < br $>
函数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;
}
< br $>
函数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文件上传器显示以前上传的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
