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

xxhby3vn  于 2023-04-10  发布在  Java
关注(0)|答案(3)|浏览(141)

我只是将基本的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

3条答案

按热度按时间
wr98u20j

wr98u20j1#

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

但是，我在完成后上传的项目的第二次渲染中实现了一些自定义。

它看起来比以前更好。为了实现这一点，我修改了

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下载原始示例项目来检查更改

赞(0）分享  回复(0）举报  2023-04-10
8aqjt8rx

8aqjt8rx2#

以下是我在上传文件后添加自定义缩略图的解决方案，假设你使用的是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>
赞(0）分享  回复(0）举报  2023-04-10
p5cysglq

p5cysglq3#

使用当前版本的jQuery File Uploader，我在上传之前获得了一个默认的pdf预览图标，方法是在img文件夹中放置一个80 x80 gif（pdf80x80.gif），并将其添加到jquery.fileupload-ui.css的顶部

span.preview{
  background: url('../img/pdf80x80.gif') !important;
  display: block;
  width: 80px;
  height: 80px;
}

对于上传后的预览，在index.html中，我更改了标记为“显示可供下载的文件的模板”的部分

<span class="preview">
    {% if (file.thumbnailUrl) { %}
        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
    {% } %}
</span>

到

<span class="preview">
    {% if (file.thumbnailUrl) { %}
        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
    {% } else { %}
        <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="./img/pdf80x80.gif"></a>
    {% } %}
</span>

注意：我的网站只允许上传jpg或pdf格式的文件，所以我只需要一个非图片的默认图标。
问题：
1.上传过程中可能会短暂出现PDF图标（使用非透明上传gif？）
1.如果上传失败，将显示PDF图标

赞(0）分享  回复(0）举报  2023-04-10
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com