大致思路

在這之前，我們已經(jīng)將圖片按鈕在頁(yè)面放好了，其實(shí)是一個(gè)文件類型的input，下面只需在它身上做功夫便可。
用戶點(diǎn)擊圖片按鈕后，彈出文件選擇窗口供用戶選擇圖片?？紤]使用FileReader來(lái)將圖片讀取為base64格式的字符串形式進(jìn)行發(fā)送。而base64格式的圖片直接可以指定為圖片的src，這樣就可以將圖片用img標(biāo)簽顯示在頁(yè)面了，這樣就不需要使用formidable模塊將圖片上傳至本地啦。

圖片讀取

//監(jiān)聽圖片按鈕
$('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;   
};    
//調(diào)用圖片顯示函數(shù)
reader.onload = function(e) {      
this.value = '';         
 _displayImage( e.target.result);   
 };   
//將圖片讀取為base64格式的字符串形式
 reader.readAsDataURL(file);  
};
}

圖片顯示

將獲取到base64格式的圖片直接可以指定為圖片的src，利用img標(biāo)簽發(fā)送給好友。

function _displayImage(imgData) {    
  var msg='<img class="img-thumbnail" src="' + imgData + '"/>';
  socket.send(_id,fid,msg);
   }