Kendo file uploader для отображения ранее загруженных файлов
Я использую Kendo File Upload для загрузки файлов, и после загрузки я конвертирую файл в байтовый массив и сохраняю его в базе данных в двоичном формате данных.Мое требование заключается в том,что я хочу отображать загруженные файлы в области загрузки, то есть в области, куда я загружаю файлы.(Возьмите содержимое байтового массива файлов из базы данных и преобразуйте его в строку Base64 thees раздел, который я сделал)
Что я уже пробовал:
@* Код загрузки файла, какие изменения я сделал в этом коде для отображения файлов в загруженной области ?
Пример Загрузки Файла
&ЛТ;форма метод="сообщение" действие='@URL-адрес.Действий("сохранить")'&ГТ;
<h2>
@(Html.Kendo (). Upload()
.Указанный файл").
TemplateId ("fileTemplate")
. Messages (m => m.Select ("добавить файлы здесь."))
.Async(a => a
.Сохранить("Сохранить", "Загрузить")
. Remove("Удалить", " Загрузить")
.AutoUpload(ложь)).События (events = & gt; events.Select ("onSelect")))
<сценарий идентификатор="fileTemplate" тип="текст/х-кендо-шаблон"&ГТ;
< img class= ' file-icon #=addExtensionClass(files[0]. extension)#' /> <!-- вот я и пытаюсь привязать изображение ... ;
@*
&ЛТ;кнопка типа='значение' class='к-загрузки-действие'&ГТ;&ЛТ;/кнопку&ГТ;
< / script>
& lt;скрипт>
var a = 0;
функция onSelect(e) {
$.каждый(электронная.файлов, функция (ИНДЕКС, значение) {
readMultipleFiles(значение);
});
ля++;
}
функция addExtensionClass (расширение) {
вернуть;
}
функция readMultipleFiles(файл) {
var reader = новый файловый редактор();
reader. onload = функция (e) {
// привязка содержимого файла
$('.'+a+"). attr ({ src: e. target. result });
}
читатель.readAsDataURL(файл.rawFile);
}
< / script>
< стиль scoped>
. демо-раздел{
ширина: 350px;
поплавок: справа;
цвет фона: #f7f7f7;
обивка: 20 пикселей;
граница: 1px solid #dbdbdb;
}
.демо-раздел .к-виджет.к-загрузки.к-коллектор{
граница-радиус: 0px;
граница: нет;
цвет фона: #F7F7F7;
}
.демо-раздел .к-загрузки-файлы{
ширина: 100%;
переполнения: скрытые;
цвет фона: #fff;
граница: нет;
минимальная высота: 235px;
}
.демо-раздел .к-загрузки-файлы .к-файл{
ширина: 48%;
поплавок: левый;
граница: нет;
отступ-слева: 0px;
}
.демо-раздел .к-дропзона{
цвет фона: #fff;
граница-дно: нет;
маржа-дно: 30px;
}
.демо-раздел .к-дропзона .к-кнопка.к-загрузки-кнопку{
высота: которой 75px;
граница: 1px пунктирная #000;
ширина: 100%;
цвет фона: #fff;
граница-радиус: 0px;
padding-top: 26px;
фон положение: 0px;
коробка-тень: нет;
}
.демо-раздел .к-дропзона .к-кнопка.к-загрузки-кнопка ввода{
цвет фона: #fff;
коробка-тень: нет;
}
.значок файла {
/ * дисплей: встроенный блок;
поплавок: левый;
ширина: 80px;
высота: 80px;
поле слева: 42px;
маржа-топ: 45.5 пикселей;*/
ширина: авто;
высота: 135px;
максимальная высота: 100%;
максимальная ширина: 100%;
}
ли.к-файл .файл-обертку .к-загрузки-действие {
положение: абсолютное;
топ: 0;
справа:0;
}
ли.к-файл div.файл-обертку {
положение: относительное;
высота: 100px;
обивка: 15px;
/ * поплавок: слева;
ширина:50%;*/
}
< / стиль>
Загрузка Вложений
@(Html.Kendo (). Upload()
.Указанный файл").
TemplateId ("fileTemplate")
. Messages (m => m.Select ("добавить файлы здесь."))
.Async(a => a
.Сохранить("Сохранить", "Загрузить")
. Remove("Удалить", " Загрузить")
.AutoUpload(ложь)).События (events = & gt; events.Select ("onSelect")))
<сценарий идентификатор="fileTemplate" тип="текст/х-кендо-шаблон"&ГТ;
< img class= ' file-icon #=addExtensionClass(files[0]. extension)#' /> <!-- вот я и пытаюсь привязать изображение ... ;
@*
Имя name#
Размер: #=размер# байт
*@&ЛТ;кнопка типа='значение' class='к-загрузки-действие'&ГТ;&ЛТ;/кнопку&ГТ;
< / script>
& lt;скрипт>
var a = 0;
функция onSelect(e) {
$.каждый(электронная.файлов, функция (ИНДЕКС, значение) {
readMultipleFiles(значение);
});
ля++;
}
функция addExtensionClass (расширение) {
вернуть;
}
функция readMultipleFiles(файл) {
var reader = новый файловый редактор();
reader. onload = функция (e) {
// привязка содержимого файла
$('.'+a+"). attr ({ src: e. target. result });
}
читатель.readAsDataURL(файл.rawFile);
}
< / script>
< стиль scoped>
. демо-раздел{
ширина: 350px;
поплавок: справа;
цвет фона: #f7f7f7;
обивка: 20 пикселей;
граница: 1px solid #dbdbdb;
}
.демо-раздел .к-виджет.к-загрузки.к-коллектор{
граница-радиус: 0px;
граница: нет;
цвет фона: #F7F7F7;
}
.демо-раздел .к-загрузки-файлы{
ширина: 100%;
переполнения: скрытые;
цвет фона: #fff;
граница: нет;
минимальная высота: 235px;
}
.демо-раздел .к-загрузки-файлы .к-файл{
ширина: 48%;
поплавок: левый;
граница: нет;
отступ-слева: 0px;
}
.демо-раздел .к-дропзона{
цвет фона: #fff;
граница-дно: нет;
маржа-дно: 30px;
}
.демо-раздел .к-дропзона .к-кнопка.к-загрузки-кнопку{
высота: которой 75px;
граница: 1px пунктирная #000;
ширина: 100%;
цвет фона: #fff;
граница-радиус: 0px;
padding-top: 26px;
фон положение: 0px;
коробка-тень: нет;
}
.демо-раздел .к-дропзона .к-кнопка.к-загрузки-кнопка ввода{
цвет фона: #fff;
коробка-тень: нет;
}
.значок файла {
/ * дисплей: встроенный блок;
поплавок: левый;
ширина: 80px;
высота: 80px;
поле слева: 42px;
маржа-топ: 45.5 пикселей;*/
ширина: авто;
высота: 135px;
максимальная высота: 100%;
максимальная ширина: 100%;
}
ли.к-файл .файл-обертку .к-загрузки-действие {
положение: абсолютное;
топ: 0;
справа:0;
}
ли.к-файл div.файл-обертку {
положение: относительное;
высота: 100px;
обивка: 15px;
/ * поплавок: слева;
ширина:50%;*/
}
< / стиль>
< / форма>