javascript - BlueImp jQuery 文件上传缩略图预览改进

Question

我只是将基本 UI 示例集成到一个应用程序中。我想要实现的是为一些无法在预览中渲染的文件添加特定的缩略图。例如，我想为word、excel、ppt和pdf添加一些图像。我想得到一个固定的图像。

我知道如何生成此文件的预览，但首先我想尝试一些简单的操作。

我正在检查这个问题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);
            });
        },

这是我必须修改才能使其工作的唯一部分吗？

如果有人可以向我解释一下，控件的内部流程是如何生成图像预览的。我将非常感激。

Answer 1

最后，我无法修改控件中的预览功能。

但是，我在完成后上传的项目的第二次渲染中实现了一些自定义。 看起来比以前好多了。为了实现这一点，我修改了

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