分享一个js截图在layim里实现截图上传的功能

分享 未结 精帖
10 2854
Sooo
Sooo VIP4 2017-9-19
悬赏:10飞吻
话不多说,先上code吧 [嘻嘻]
var imgReader = function( item ){
var blob = item.getAsFile(),
reader = new FileReader();
reader.onload = function( e ){
imgSrc = e.target.result;
layer.confirm('是否要发送该截图?', {icon: 3, title:'发送截图'}, function(index){
$.post('http://www.xx.dev/upload_scream.php',{imageBase64Content:imgSrc},function(result){
if(result.code == 0){
$('.layim-chat-textarea textarea').val($('.layim-chat-textarea textarea').val()+''); //这里注意要使用layim提供的内置标签哦
layer.close(index);
}else{
alert(result.msg);
}
},'json');
layer.close(index);
});
};

reader.readAsDataURL( blob );
};

try{
$('body').unbind('paste',".layim-chat-textarea textarea").bind('paste',".layim-chat-textarea textarea",function(e){
var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
var i = 0, items, item, types;
if( clipboardData ){
items = clipboardData.items;
if( !items ){
return;
}
item = items[0];
types = clipboardData.types || [];
for(var i = 0; i < types.length; i++ ){
if( types[i] === 'Files' ){
item = items[i];
break;
}
}
if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
imgReader( item );
}
}
});
}catch (e){console.log(e)}
由于上传的是base64的代码,所以PHP端接收之后 要注意一下
$image_base = trim($_POST['imageContent']);
$img = str_replace('data:image/png;base64','',$image_base); //去掉 data:image/png;base64
$img = str_replace('','+',$img);
$data_img = base64_decode($img);
然后就是 用 file_put_contents保存了。
这样就跟在QQ里聊天一样了,截图之后,command+v 会提示你是否要粘贴发送图片,确认就可以了。
还有一点就是 layim里提供了专门的img标签来发送图片的
超链接格式:文本       如:layui   
图片格式: 如:
文件格式:file(地址)[文本] 如:file(http://cdn.layui.com/download/layim.zip)[layim.zip]
音频格式:audio[地址] 如:audio[http://cdn.layui.com/xxx/a.mp3]
视频格式:video[地址] 如:video[http://cdn.layui.com/xxx/a.avi]
OK了。先这样。
回帖
本帖已设置禁止回复