使用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);