BlueImp jQuery文件上传预览对缩略图的改进
BlueImp jQuery文件上传预览对缩略图的改进
提问于 2016-08-11 02:50:30
我只是将基本的UI示例集成到一个应用程序中。我想要实现的是为一些不能在预览中呈现的文件添加一个特定的缩略图。例如，我想为word、excels、ppt和pdfs添加一些图像。我想要一个固定的图像。
我知道如何生成这些文件的预览，但首先我想尝试一些简单的东西。
我在检查这个问题Blueimp Jquery File Upload : Doesn't show thumbnail preview image
在我的例子中，控件正确地预览视频和图像。
他们在jquery.fileupload-ui.js中讨论修改这个函数。
_renderPreviews: function (data) {
data.context.find('.preview').each(function (index, elm) {
$(elm).append(data.files[index].preview);
});
},这是我唯一需要修改的部分吗？
如果有人能向我解释，控件的内部流程是如何生成图像预览的。我会非常感激的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-10-14 00:04:05
最后，我无法修改控件中的预览功能。
但是，在完成后上传的项目的第二次呈现中，我实现了一些定制。
以前看起来好多了。为了达到这个目的，我修改了
public ActionResult GetThumbnailFile(string folderServerPath,string name, bool thumbnail = false)
{
var file = GetFile(name, folderServerPath);
var contentType = MimeMapping.GetMimeMapping(file.Name);
return thumbnail ? Thumb(file, contentType) : File(file.FullName, contentType);
}
private ActionResult Thumb(FileInfo file, string contentType)
{
if (contentType.StartsWith("image"))
{
try
{
using (var img = Image.FromFile(file.FullName))
{
var thumbHeight = (int)(img.Height * (ThumbSize / (double)img.Width));
using (var thumb = img.GetThumbnailImage(ThumbSize, thumbHeight, () => false, IntPtr.Zero))
{
var ms = new MemoryStream();
thumb.Save(ms, img.RawFormat);
ms.Position = 0;
return File(ms, contentType);
}
}
}
catch (Exception ex)
{
// todo log exception
}
}
else
{
switch (file.Extension.ToUpperInvariant())
{
case ".LOG":
return File("~/Images/general_documents_preview/txt-icon-128.png", contentType);
case ".PDF":
return File("~/Images/general_documents_preview/pdf-icon-128.png", contentType);
case "JPEG":
//icon = "JPEG-File-icon-128.png";
break;
case "JPG":
//icon = "JPEG-File-icon-128.png";
break;
case "WBMP":
//icon = "Illustrator-File-icon128.png";
break;
case "BMP":
//icon = "BMP-File-icon-128.png";
break;
case "TIF":
//icon = "Web-File-icon-128.png";
break;
case "JP2":
//icon = "Vector-File-icon-128.png";
break;
case "JBIG2":
//icon = "Vector-File-icon-128.png";
break;
case "EMF":
//icon = "Photoshop-File-icon-128.png";
break;
case "GIF":
//icon = "GIF-File-icon-128.png";
break;
case "PNG":
//icon = "PNG-File-icon-128.png";
break;
case "TXT":
return File("~/Images/general_documents_preview/txt-icon-128.png", contentType);
case ".DOC":
return File("~/Images/general_documents_preview/doc-icon-128.png", contentType);
//icon = "doc-icon-128.png";
case ".DOCX":
return File("~/Images/general_documents_preview/docx-icon-128.png", contentType);
//icon = "docx-icon-128.png";
case ".PST":
return File("~/Images/general_documents_preview/pst-icon-128.png", contentType);
//icon = "pst-icon-128.png";
case ".PPT":
return File("~/Images/general_documents_preview/ppt-icon-128.png", contentType);
//icon = "ppt-icon-128.png";
case ".PPTX":
return File("~/Images/general_documents_preview/pptx-icon-128.png", contentType);
//icon = "pptx-icon-128.png";
case ".HTML":
return File("~/Images/general_documents_preview/html-icon-128.png", contentType);
//icon = "html-icon-128.png";
case ".RTF":
return File("~/Images/general_documents_preview/rtf-icon-128.png", contentType);
//icon = "rtf-icon-128.png";
case ".DLL":
return File("~/Images/general_documents_preview/dll-icon-128.png", contentType);
//icon = "dll-icon-128.png";
case "EML":
//icon = "eml-icon-128.png";
break;
case ".FLA":
return File("~/Images/general_documents_preview/fla-icon-128.png", contentType);
case ".SWF":
return File("~/Images/general_documents_preview/fla-icon-128.png", contentType);
//icon = "fla-icon-128.png";
case ".MP3":
return File("~/Images/general_documents_preview/mp3-icon-128.png", contentType);
case ".XLS":
return File("~/Images/general_documents_preview/xls-icon-128.png", contentType);
//icon = "xls-icon-128.png";
case ".XLSX":
return File("~/Images/general_documents_preview/xlsx-icon-128.png", contentType);
//icon = "xlsx-icon-128.png";
default://unknow
return File("~/Images/general_documents_preview/bin-icon-128.png", contentType);
}
}
return Redirect($"https://placehold.it/{ThumbSize}?text={Url.Encode(file.Extension)}");
}您可以检查从https://github.com/ronnieoverby/blue-imp-upload-aspnet-mvc/tree/master/src/jquploadz下载原始示例项目的更改。
Stack Overflow用户
发布于 2017-11-25 14:07:46
下面是我在上传文件之后添加自定义缩略图的解决方法，假设您使用的是blueimp模板(x-tmpl)，如演示示例：https://github.com/blueimp/JavaScript-Templates
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
{% } else {
// Display relevant icon
var ext = file.name.substr(file.name.lastIndexOf('.') + 1);
var icon = "icons/generic.png";
if (ext === "pdf") {var icon="icons/pdf.png"};
if (ext === "xls" || ext === "xlsx" || ext === "csv" || ext === "ods" || ext === "xlr") {var icon="icons/excel.png"};
if (ext === "psd" || ext === "psb" || ext === "eps" || ext === "tif" || ext === "tiff" || ext === "indd" || ext === "ind" || ext === "bmp" || ext === "ai") {var icon="icons/graphic.png"};
if (ext === "tar" || ext === "rar" || ext === "tgz" || ext === "gz" || ext === "7z" || ext === "sit" || ext === "sitx" || ext === "cab") {var icon="icons/archive.png"};
if (ext === "docx" || ext ==="doc") {var icon="icons/word.png"};
if (ext === "rtf" || ext === "txt" || ext === "log" || ext === "xml" || ext === "css" || ext === "htm" || ext === "html") {var icon="icons/txt.png"};
if (ext === "zip") {var icon="icons/zip.png"};
if (ext === "mov" || ext === "avi" || ext === "m4v" || ext === "3gp" || ext === "mpeg" || ext === "mkv" || ext === "vob" || ext === "aaf" || ext === "asf" || ext === "wmv" || ext === "flv" || ext === "swf" || ext === "mpg" || ext === "mp4") {var icon="icons/mov.png"};
if (ext === "ppt" || ext === "pptx" || ext === "pps") {var icon="icons/ppt.png"};
if (ext === "pkg" || ext === "rpm") {var icon="icons/pkg.png"};
if (ext === "dmg" || ext === "iso" || ext === "bin" || ext === "toast") {var icon="icons/dmg.png"};
if (ext === "key" || ext === "odp") {var icon="icons/keynote.png"};
if (ext === "pages" || ext === "odt") {var icon="icons/pages.png"};
if (ext === "numbers") {var icon="icons/numbers.png"};
if (ext === "wav" || ext === "aif" || ext === "aiff" || ext === "m4a" || ext === "ogg" || ext === "mp3" || ext === "caf" || ext === "aac") {var icon="icons/wav.png"};
if (ext === "fnt" || ext === "fon" || ext === "otf" || ext === "ttf") {var icon="icons/font.png"};
%}<img src="{%=icon%}">{% } %}
</span>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38886502
复制相关文章
相似问题
腾讯云开发者
