socket聊天室增加文件上传与下载功能

新增功能：自定义表情包上传，群文件上传与下载。其实总结就增加了一个功能：文件上传。

操作指示：点击“上传文件”可以选择任何类型的文件，如果是图片格式则直接作为图片输入到对话框，如果是其他文件类型则添加到群文件。另外点击文件名即可下载文件。.大致如下图所示：

既然截了图那就截全套，哈哈哈哈。

代码已更新至github: https://github.com/COMINGLIU/socket-chat-online/tree/master/chat2

文件上传功能（前端）：

sendFile: function(){
      var upFileBtn = doc.getElementsByName("upFile")[0];
      var file_type=[]
      upFileBtn.onchange = function(){
        // console.log(this.files);
        console.log(this.files[0]);
        var file = this.files[0];
        var reader = new FileReader();
        if(file.type == "image/jpeg"||"image/png"){
          reader.readAsDataURL(file);
        }else {
            reader.readAsText(file);
        }
        reader.onload = function(){
          var data = {user: window.sessionStorage.getItem('nickName'),file:this.result,name:file.name,type:file.type,size:file.size,headP:window.sessionStorage.getItem('myHeadPhoto')};
          socket.emit('sendFile',data);
        }
      }
   }

文件接收功能（前端）：

    // 接收文件
    receiveFile: function() {
      // 群文件数量
      var oFileNum = doc.getElementById("fileN");
      var oFileUl = doc.getElementById("file-list");
      socket.on('receiveFile',function(data){
        console.log(data);
        var item = doc.createElement("li");
        if(data.type="text/plain") {
          item.innerHTML = "<a href='"+data.file+"' download='"+data.name+"'>"+data.name.split('.')[0]+"</a><span>"+data.name.split('.')[1]+"</span>";
        }else {
          item.innerHTML = "<a href='"+data.file+"'>"+data.name.split('.')[0]+"</a><span>"+data.name.split('.')[1]+"</span>"
        }
        oFileUl.appendChild(item);
        oFileNum.innerHTML =  oFileUl.getElementsByTagName("li").length;
      })
    },

*前端接收到服务器广播的文件后，创建节点填入文件数据插入到文件list的框中。并通过<a href="">提供下载功能，此处由于txt与其他类型文件的下载方式不同则分别进行判断(txt只需在<a href=“”>里增加一条download="文件名"即可)。

后台：

  socket.on('sendFile',function(data){
    console.log(data);
    // io.emit('receiveFile',data);
    if(data.type =="image/jpeg"||data.type == "image/png") {
      io.emit('message',{
        user: data.user,
        headPhoto: data.headP,
        imgUrl: data.file
      })
    }else {
      io.emit('receiveFile',data);
    }

后台接收到前端发送的文件后，判断文件类型，如果是图片类型的格式，则重新定义文件数据发往‘message’这条socket道上（发送自带表情也是这条道），否则将传过来的文件对象直接通过‘receiveFile’道广播到各个用户。