6
回答
WebUploader的缩略图如何在后台保存以及下次打开页面时如何展示的问题

大家好,我的使用场景如下:(我觉得比较通用)

用户在需要专家帮忙的时候需要填写文字信息以及上传图片

可上传多图,每选择一个图片无需点击“上传”按钮而自动上传

上传成功后,出现缩略图,在右上角有删除的角标

点击缩略图进行大图预览

=======以上内容都已经磕磕绊绊的实现了=========

基本是在WebUploader在github上提供的sample修改而来,感觉很满意。

其中,大图预览使用的是amazeui的单张图片预览功能,当然改了下他的css

使用方法为:在uploadSuccess事件中加入如下代码

//上传成功后设置缩略图以及大图预览
        uploader.makeThumb(file, function (error, src) {
            var img;
            if (error) {
                $wrap.text('不能预览');
                return;
            }
            //设置大图打开地址
            relSrc = "/lzqx/upload/showPic/" + response.resid;

            //设置amazeui的单张图片预览效果
            img = $('<figure data-am-widget="figure" class="am am-figure am-figure-custom" data-am-figure="{pureview: \'true\'}">' +
                '<img src="' + src + '" data-rel="' + relSrc + '" alt="预览"/>' +
                '</figure>' +
                '<span class="resid">' + response.resid + '</span>');

            $('#' + file.id).find('.imgWrap').html(img);

            //重新初始化,amazeui的大图预览插件(必须)
            $.AMUI.figure.init();

        }, thumbnailWidth, thumbnailHeight);



由于官方的例子是选择若干个文件后最后点击上传,所以文件在加入queue后进行预览,而我这个是随选随传,所以我将图片预览放到了上传成功的事件中。

其中,relSrc为大图预览的url,resid为上传成功后server返回来的图片id,其实就是我自己有一张表叫upload_res的主键,表的每行存着图片路径等信息。

那么问题来了????

当我完成了该页面的编辑并保存退出后,再次进入到该页面,我需要将表单信息以及上传过的图片信息再次展示出来,表单信息肯定可以,但是图片的缩略图没办法展示出来,因为缩略图我没存储。

我看了下其他的上传控件,有的可以同时向后台传递缩略图和原图,但是WebUploader不提供,我估摸着将缩略图的data url按照BLOB形式存储到数据库表中可以实现,也就是我在页面表单填写完毕以及上传文件后,将data url放在form的hidden中,一起传递到后台,然后下次打开页面查看图片等时候直接就可以预览了。

我测试了一下:

原图大小:2MB,缩略图大小:5KB,webuploader压缩后存服务器的图片大小为300KB

ps: 我测试缩略图大小的方法是把dataurl复制到地址栏中就可以打开图片,然后保存文件看大小。

数据库表每行存个5KB的BLOG不知道会不会有问题?

不知道其他朋友是如何解决缩略图存储的?是否我的方法不太对。

举报
错觉
发帖于3年前 6回/8K+阅
共有6个答案 最后回答: 2年前

题主这个问题没搞过缩略图 一般修改的适合就把图片url展示成了指定大小的了,之前也搞过这个控件 感觉还是没玩透,不过确实帮忙做了很多事情 

--- 共有 2 条评论 ---
陌生、路人甲回复 @错觉 : 恩 我之前给图片上传加了个记录旋转角度 搞醉了 最近弄修改图片的时候控制图片上传的数量 3年前 回复
错觉谢谢,没事,我继续查,这种系统中的基础功能做出来还是比较麻烦的,得花时间,不过出来以后复用就爽多了,虽说技术含量不高,但也得有人干 3年前 回复

图片不要存到数据库里面····存路径···

WebUploader.create 有一个 auto 、server 配置项,可以自动上传至服务端,之后图片既然上传到服务端了,缩略图这一部分不就是你这边自己可以控制的了·

--- 共有 2 条评论 ---
错觉其实存2个图片比较好,第一次加载缩略图会很快,如果用户感兴趣通过点击查看大图,再发送一个请求给服务器查看大图。那么我需要研究java生成缩略图的方法 3年前 回复
错觉恩,如果缩略图再存一次,那么看一张图片需要2个请求,我现在正在尝试客户端即时生成缩略图,用的jqthumb,呵呵,一会儿发布结果 3年前 回复

经过从上午到现在的研究和测试以及代码的整理,把图片上传整体功能都完成了,解决方案为:

后台用thumbnailator来实现server端的缩略图生成, 当再次编辑的时候,从先展示缩略图,用户点击缩略图然后放服务器发请求看大图,呵呵,终于可以把我以前自己写的iframe版的单张图片无刷新上传替换掉了。

回来再完善完善,弄成git项目进行开源,真是开箱即用,爽歪歪~

--- 共有 1 条评论 ---
孤天最近也接触到了这样的问题,能分享下展示的代码吗? 2年前 回复
顶部