使用WebUploader本地生成缩略图

全民都在python大法,也不能免俗,Flask搭个架子,图片上传+识别。

想看本地的缩略图,直接采用file的路径,由于chrome的安全限制,没办法只好用html5的FileReader,还需要配合input标签,但是,webuploader里没有input标签啊

折腾了一个小时,无果,这时候只好翻翻官方的API了。

果然在官方的demo里发现了类似的功能,http://fex.baidu.com/webuploader/demo.html

翻一翻源码,http://fex.baidu.com/webuploader/js/demo.js 找到了这个函数makeThumb

一看官方API,立马安排得明明白白。

下面贴代码,在

uploader.on('fileQueued', function(file) {}

函数里加上:

var $img = $('<div></div>');
uploader.makeThumb(file, function (error, src) {
if (error) {
return;
}
var img = $('<img src="' + src + '">');
$img.append(img);
}, 100, 100);

这里的100是缩略图尺寸,然后把$img元素插入到你想要的地方去即可。比如我想插入到

<td class="info"><span></span></td>这个td里去,
$list.find('td.info span').append($img);

 

posted @ 2020-01-06 01:10  谷子弟  阅读(1646)  评论(0编辑  收藏  举报