【问题标题】:BlueImp jQuery File Upload preview improvement to thumbnailsBlueImp jQuery 文件上传预览改进缩略图
【发布时间】:2016-12-17 14:39:28
【问题描述】:

我只是将基本 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);
            });
        },

这是我唯一需要修改的部分吗?

如果有人可以向我解释,生成图像预览的控件的内部流程如何。我会很感激的。

【问题讨论】:

    标签: javascript jquery file thumbnails blueimp


    【解决方案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

    【讨论】:

      【解决方案2】:

      这是我在上传文件后添加自定义缩略图的解决方法,假设您使用的是演示示例中的 blueimp javascript 模板 (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>
      

      【讨论】:

        猜你喜欢
        • 2012-06-13
        • 2013-12-15
        • 2023-03-09
        • 1970-01-01
        • 2014-12-25
        • 2018-10-02
        • 2016-06-12
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多