文件传输

talkview/src/js/directive/currentmessage.js

@@ -24,6 +24,22 @@
                 $location.hash("bottom");
                 $anchorScroll();
             };
+
+            var getFileName = function(item) {
+                var arr = item.fileName.split("\\");
+                return arr[arr.length - 1];
+            };
+
+            var getFileSize = function(item) {
+                var fileSize = item.length;
+                if (fileSize > 1024 * 1024 * 1024)
+                    return (Math.round(fileSize * 100 / (1024 * 1024 * 1024)) / 100).toString() + 'GB';
+                else if (fileSize > 1024 * 1024)
+                    return (Math.round(fileSize * 100 / (1024 * 1024)) / 100).toString() + 'MB';
+                else
+                    return (Math.round(fileSize * 100 / 1024) / 100).toString() + 'KB';
+            };
+
             var replaceSystemFace = function(content) {
                 //匹配表情
                 var g = (/\/\:([\w]+)/).exec(content);
@@ -114,16 +130,17 @@
                     '</span>';
             } else if (scope.msg.contentType == 3) {
                 element.css({
-                    width: '275px'
+                    width: '290px'
                 });
                 //element.addClass('file-message');
-                var reg = /\?[\W\w]*/;
-                var fileName = decodeURIComponent(reg.exec(scope.msg.content).toString().substr(1));
-
+                var content = JSON.parse(scope.msg.content);
+                console.log(content);
                 html = '<div class="file-message">' +
                     '<img src="../img/unkown.png" onError= "this.src = \'../img/file/unkown.png\'">' +
-                    '<span style="float:left; margin:5px 0px 0px 0px">文件名：' + fileName + '<br/>大小：' + scope.msg.length + '</span>' +
+                    '<p><input type="text" readonly="readonly" value="' + getFileName(content) + '"></p>' +
+                    '<span>大小：' + getFileSize(content) + '</span>' +
                     '<div class="p-t-sm text-right">' +
+                    '<span id="transinfo"><span style="color:green;" class="glyphicon glyphicon-ok"></span><span>传输完成</span></span>' +
                     '<a class="text-primary" role="button"><span>打开</span></a>&nbsp&nbsp' +
                     '<a class="text-primary" role="button"><span>打开文件夹</span></a>' +
                     '</div>' +

talkview/src/js/directive/historymessages.js

@@ -25,6 +25,22 @@
                 $location.hash("bottom");
                 $anchorScroll();
             };
+
+            var getFileName = function(item) {
+                var arr = item.fileName.split("\\");
+                return arr[arr.length - 1];
+            };
+
+            var getFileSize = function(item) {
+                var fileSize = item.length;
+                if (fileSize > 1024 * 1024 * 1024)
+                    return (Math.round(fileSize * 100 / (1024 * 1024 * 1024)) / 100).toString() + 'GB';
+                else if (fileSize > 1024 * 1024)
+                    return (Math.round(fileSize * 100 / (1024 * 1024)) / 100).toString() + 'MB';
+                else
+                    return (Math.round(fileSize * 100 / 1024) / 100).toString() + 'KB';
+            };
+
             var replaceSystemFace = function(content) {
                 //匹配表情
                 var g = (/\/\:([\w]+)/).exec(content);
@@ -98,17 +114,14 @@
                     '</a>' +
                     '</span>';
             } else if (scope.msg.contentType == 3) {
-                // element.css({
-                //     width: '300px'
-                // });
-                //element.addClass('file-message');
-                var reg = /\?[\W\w]*/;
-                var fileName = decodeURIComponent(reg.exec(scope.msg.content).toString().substr(1));
-
-                html = '<div class="file-message" style="width:250px">' +
+                var content = JSON.parse(scope.msg.content);
+                console.log(content);
+                html = '<div class="file-message" style="width:265px">' +
                     '<img src="../img/unkown.png" onError= "this.src = \'../img/file/unkown.png\'">' +
-                    '<span style="float:left; margin:5px 0px 0px 0px">文件名：' + fileName + '<br/>大小：' + scope.msg.length + '</span>' +
+                    '<p><input type="text" readonly="readonly" value="' + getFileName(content) + '"></p>' +
+                    '<span>大小：' + getFileSize(content) + '</span>' +
                     '<div class="p-t-sm text-right">' +
+                    '<span id="transinfo"><span style="color:green;" class="glyphicon glyphicon-ok"></span><span>传输完成</span></span>' +
                     '<a class="text-primary" role="button"><span>打开</span></a>&nbsp&nbsp' +
                     '<a class="text-primary" role="button"><span>打开文件夹</span></a>' +
                     '</div>' +

talkview/src/less/app.main.less

@@ -126,13 +126,32 @@
     background-color: #fff;
     padding: 8px;
     border-radius: 6px;
-}
-
-.file-message > img{
-    margin:5px 5px 5px 5px;
-    width: 48px; 
-    height: 48px;
-    float:left;
+    white-space: nowrap;
+    > img{
+        margin:0px 5px 5px 5px;
+        width: 48px; 
+        height: 48px;
+        float:left;
+    }
+    >a>span{
+        margin-top: 10px;
+        margin-right: 5px;
+    }
+    >p>input{
+        border: none;
+        outline: none;
+        width: 75%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    #transinfo{
+        float: left;
+        color: #666;
+        >span{
+            margin-left: 5px;
+        }
+    }
 }
 
 .file-message > div{
@@ -143,11 +162,6 @@
     padding-top: 10px;
 }
 
-.file-message > a >span{
-    margin-top: 10px;
-    margin-right: 5px;
-}
-
 [scroll-glue-top],
 [scroll-glue-bottom],
 [scroll-glue]{