聊天室之图片发送

大致思路

在这之前，我们已经将图片按钮在页面放好了，其实是一个文件类型的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);
   }