ASP.NET SignalR 與LayIM配合，輕松實現網站客服聊天室（七）之 圖文，附件消息（2016-05-05 12:13）

　　上一篇介紹了加好友的流程，這里不再贅述，不過之前的聊天只能發送普通文字，那么本篇就教你如何實現發送附件和圖片消息。我們先對功能進行分析：

• 發送圖片，附件，需要實現上傳圖片和附件的功能。
• textarea不能顯示圖片，所以需要做圖片轉換
• 接收到消息之后需要在將圖片轉換回原來圖片
• 附件特殊樣式處理

　　那么我們先實現文件的上傳功能，由於用的是MVC，就簡單做一個無刷新無進度條上傳，所以圖片和文件就需要小一點，否則用戶體驗就差了。我用的是jquery.form.js實現form提交文件，后台用HttpPostedFileBase 接收file文件，然后保存。最后返回文件的新路徑和名稱。看一下后台代碼：（一段很簡單的文件上傳代碼，沒有做過多的處理，注意要新建好upload文件夾）

 public JsonResult UploadFile(HttpPostedFileBase file,int userid=0)
        {
            if (file != null && file.ContentLength > 0)
            {
                string fileExtension = Path.GetExtension(file.FileName).ToLowerInvariant();
                string fileName = Guid.NewGuid().ToString();
                string fullFileName = string.Format("{0}{1}", fileName, fileExtension);
                string oldFileName = Path.GetFileName(file.FileName);

                string fileSavePath = string.Format("{0}{1}", Server.MapPath("/upload/"),fullFileName);
                string url = "/upload/" + fullFileName;
                file.SaveAs(fileSavePath);
                bool isImg = FileExtension.isImage(fileExtension);
                if (userid > 0) {
                    UserBLL.UpdateUserPhoto(url, userid);
                }
                return Json(new { url = url, name = oldFileName, ext = fileExtension, name1 = fullFileName, t = isImg ? "img" : "file" }, JsonRequestBehavior.DenyGet);
            }
            return Json("", JsonRequestBehavior.DenyGet);
        }

　　下面我們在看一下如果文件上傳成功，返回的json：

　　ext： 文件后綴，name： 文件原名 name1： 文件新名稱 t： img/file  url：文件路徑

　　那么上傳完文件之后要以特殊標志顯示在聊天輸入框中。我們簡單賦值就可以了。效果如下：

　　那么點擊發送的時候增加了什么邏輯呢，就是把圖片相關信息一並發送到服務器，打印一下發送的消息json：

　　注意一下兩個畫紅框的地方，其實我的做法很簡單，當消息接收到之后，我將url替換掉name，同時拼接img標簽就可以了。接收到消息之后代碼處理如下：

 　　　　　　//images 為圖片數組  files為附件數組  content為原消息
            log.handleMessage = function (content, images, files) {
                //處理替換圖片消息
                if (images && images.length > 0) {
                    for (var i = 0; i < images.length; i++) {
                        content = content.replace(images[i].name, '<img src="' + images[i].url + '" width="200" height="200"/>');
                    }
                }
                //處理替換附件消息
                if (files && files.length > 0) {
                    for (var i = 0; i < files.length; i++) {
                        var ext = files[i].name.split('.')[1];
                        ext = ext.substr(0, ext.length - 1);
                        var img = '<img src="/images/' + ext + '.png" width="30" height="30"/>';
                        content = content.replace(files[i].name,'<a href="' + files[i].url + '">' + img + '' + files[i].name + '</a>');
                    } 
                }
                return content;
            }

　　那么經過消息處理之后，聊天消息顯示框的內容就是活生生的圖片和附件了。附件點擊可以下載哦。不過為了歷史記錄不受影響，記住將附件或者圖片消息json存入數據庫，方便轉換。

　　下面我們總結一下：如果需要發送帶圖片和附件的消息，首先要做的就是將圖片或者文件上傳到服務器。然后相當於將路徑發送給對方，展示。因為消息展示本身就是html所以，圖片無非是img標簽罷了。更多的內容不再贅述，詳細demo移步：

　　https://github.com/fanpan26/LayIM_SignalR_Chat 記得給一顆星星哦。