大致思路
在这之前,我们已经将图片按钮在页面放好了,其实是一个文件类型的input
,下面只需在它身上做功夫便可。
用户点击图片按钮后,弹出文件选择窗口供用户选择图片。考虑使用FileReader
来将图片读取为base64
格式的字符串形式进行发送。而base64
格式的图片直接可以指定为图片的src
,这样就可以将图片用img
标签显示在页面了,这样就不需要使用formidable
模块将图片上传至本地啦。
图片读取
//监听图片按钮
$('body').on('change', '#sendImage' , doShowimg);
function doShowimg() {
if (this.files.length != 0) {
var file = this.files[0];
var reader = new FileReader();
if (!reader) {
alert('!your browser doesn\'t support fileReader');
this.value = '';
return;
};
//调用图片显示函数
reader.onload = function(e) {
this.value = '';
_displayImage( e.target.result);
};
//将图片读取为base64格式的字符串形式
reader.readAsDataURL(file);
};
}
图片显示
将获取到base64格式的图片直接可以指定为图片的src
,利用img
标签发送给好友。
function _displayImage(imgData) {
var msg='<img class="img-thumbnail" src="' + imgData + '"/>';
socket.send(_id,fid,msg);
}