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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM