Создание превью

Во-первых, мы немного схитрили с mime-type = «image\...», ведь к ним относится и bmp, и tiff файлы, которые не поддерживаются браузерами.

Так что создадим класс PreviewCreator в проекте LessonProject.Tools (PreviewCreator.cs):

public static class PreviewCreator

{

public static bool SupportMimeType(string mimeType)

{

switch (mimeType)

{

case " image/jpg":

case " image/jpeg":

case " image/png":

case " image/gif":

return true;

}

return false;

}

}

И заменим в FileController.cs (/Areas/Default/Controller/FileController.cs):

if (mimeType! = null & & PreviewCreator.SupportMimeType(mimeType.Name))

В PreviewCreator есть много функций для создания превью, так что я перечислю разные варианты создания изображения и подробно разберу один из них. Стоит учесть, что все превью создаются в формате jpeg. Итак, какие есть варианты:

· Цветной и чернобелый вариант. Контролируется параметром grayscale (по умолчанию = false)

· Превью. (CreateAndSavePreview) Если исходное изображение меньше, чем размеры превью, то изображение размещается посередине белого холста. Если по отношению к размерам исходный размер имеет вертикальную ориентированность (квадратик из портретного формата) – вырезаем верхнюю часть. Если же отношение горизонтально ориентированно относительно размера, то вырезаем середину.

· Аватар. (CreateAndSaveAvatar) Если исходное изображение меньше, чем размеры превью, то изображение просто сохраняется. Если по отношению к размерам исходный размер имеет вертикальную ориентированность (квадратик из портретного формата) – то уменьшаем, по высоте. Если же отношение горизонтально ориентированно относительно размера, то вырезаем середину.

· Изображение. (CreateAndSaveImage) Если изображение меньше, чем максимальные размеры, то сохраняем исходное. Если же изображение не вписывается в границы, то уменьшаем, чтобы оно не превышало максимальный размер, и сохраняем.

· По размеру. (CreateAndSaveFitToSize) Если изображение меньше, чем размеры, то оно будет растянуто до необходимых размеров. С потерей качества, конечно же.

· Обрезать. (CropAndSaveImage) Кроме стандартных параметров передаются координаты для обрезки изображения.

создадим превью (CreateAndSavePreview), взяв из конфигурации размеры для создания превью AvatarSize (/Areas/Default/Controllers/FileController.cs):

var filePreviewPath = Path.Combine(" /Content/files/previews", qqfile.FileName);

var previewIconSize = Config.IconSizes.FirstOrDefault(c => c.Name == " AvatarSize");

if (previewIconSize! = null)

{

PreviewCreator.CreateAndSavePreview(qqfile.InputStream, new Size(previewIconSize.Width, previewIconSize.Height), Server.MapPath(filePreviewPath));

}

return Json(new

{

success = true,

result = " error",

data = new

{

filePath,

filePreviewPath

}

});

Запускаем. Загружаем. Файлы должны загрузиться, и создастся превью.

Теперь сделаем обработку в file-index.js (/Scripts/default/file-index.js):

$('#UploadImage').fineUploader({

request: {

endpoint: _this.ajaxFileUpload

},

})

.on('error', function (event, id, name, reason) {

//do something

})

.on('complete', function (event, id, name, responseJSON) {

$(" #ImagePreview").attr(" src", responseJSON.data.filePreviewPath);

});

теперь наш файл загружается вместе с превью. Путь большого файла также можно передавать отдельно, и записывать, например, в hidden поле и сохранять в дальнейшем в БД как строку.

Что плохого в такой конструкции, так это две следующие проблемы:

· файлы могут быть перезаписаны, но это решается тем, что можно брать только расширение, а имя файлу присваивать отдельно, или добавлять немного соли

· файлы могут быть загружены и не связаны с БД. Это можно решить тем, что для каждой таблице файлы записывать в отдельную папку, а потом делать поиск и удалять не записанные.