聊天界面

talkview/src/js/controller/userController.js

@@ -40,4 +40,35 @@ angular.module('appMessage').controller('UserController', ['$scope', '$state', f
         var group = reg.exec($scope.user.l);
         $scope.user.shortL = group == null ? $scope.user.l : group[1];
     };
-}]);
+}]);
+
+// window.onload = function() {
+//     var inputBox = document.getElementById("inputBox");
+//     inputBox.ondragenter = ignoreDrag;
+//     inputBox.ondragover = ignoreDrag;
+//     inputBox.ondrop = drop;
+// }
+
+function allowDrop(ev) {
+    ev.preventDefault();
+};
+
+function drag(ev) {
+    ev.dataTransfer.setData("Text", ev.target.id);
+};
+
+function drop(ev) {
+    ev.preventDefault();
+    //取得拖进来的文件
+    var data = ev.dataTransfer;
+    var files = data.files;
+    var file = files[0];
+    console.log(files);
+    var reader = new FileReader();
+    //告诉它在准备好数据之后做什么
+    reader.onload = function(e) {
+        //使用图像URL来绘制dropBox的背景
+        $("#inputBox").append('<img src="' + e.target.result + '">');
+    };
+    reader.readAsDataURL(file);
+};

talkview/src/less/app.main.less

@@ -447,8 +447,12 @@ body {
         }
     }
     #inputBox {
-        margin: 10px auto;
-        height: 200px;
+        text-align: left;
+        height: 210px;
+        padding: 5px;
+        >img {
+            height: 100px;
+        }
     }
 }
 

talkview/src/templates/details-right.html

@@ -40,26 +40,7 @@
         <button type="button" class="btn btn-danger inConnect hide" ng-show="false">断开</button>
     </div>
 
-    <div id="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)">
-        文件拖拽到这里
-    </div>
-</div>
-<script>
-    function allowDrop(ev) {
-        ev.preventDefault();
-    }
-
-    function drag(ev) {
-        ev.dataTransfer.setData("Text", ev.target.id);
-    }
+    <div id="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true">
 
-    function drop(ev) {
-        ev.preventDefault();
-        //取得拖进来的文件
-        var data = ev.dataTransfer;
-        var files = data.files;
-        console.log(data.types);
-        console.log(files);
-        //ev.target.appendChild(document.getElementById(data));
-    }
-</script>
+    </div>
+</div>