首页 > 代码库 > 聊天室发图片和发表情设计思路

聊天室发图片和发表情设计思路

1.聊天室发图片

用户选择好图片后点击发送按钮,首先是调用后台提供的图片上传接口;

该接口先将需要发送的图片保存到服务器,保存成功后服务器返回一个图片地址给前台;

前台拿到这个地址后再将这个地址发送出去;

目标用户收到这个地址后就可以获取这个图片。

如果客户端是Web形式的,那么可以使用ajaxFileUpload这个jQuery插件,来实现异步的方式调用接口保存图片,获得后台返回的地址后再将图片地址发送出去。

ajaxFileUpload参考资料:http://www.mashangpiao.net/Article/Index/145

 

2.聊天室发表情

用户点击发送含有表情的消息其实发送的只是表情代号,目标用户接受这些代号之后就将他们解释成对应的表情图片

比如下面这段代码:

var reg = /\[\/([^\]]+)\/\]/g;
var say = "aabbbbcc[/i_f01/][/i_f02/]dddd[/i_f03/]ee";
say = say.replace(reg, "<img src=http://www.mamicode.com/‘./face/$1.gif‘ />");

say中的[/i_f01/]就是自定义表情代号,其中i_f01是表情文件名,使用正则替换的方式就可以将消息中的表情代号替换成图片

聊天室发图片和发表情设计思路