文件拖拽

talkview/src/js/controller/userController.js

@@ -63,12 +63,21 @@ function drop(ev) {
     var data = ev.dataTransfer;
     var files = data.files;
     var file = files[0];
-    console.log(files);
+    var arr = file.name.split(".");
+    console.log(file);
     var reader = new FileReader();
     //告诉它在准备好数据之后做什么
     reader.onload = function(e) {
+        if (file.type.indexOf("image") !== -1)
         //使用图像URL来绘制dropBox的背景
-        $("#inputBox").append('<img src="' + e.target.result + '">');
+            $("#inputBox").append('<img src="' + e.target.result + '">');
+        else
+            $("#inputBox").append('<div class="input-file"><p><img src="../img/file/' + arr[arr.length - 1] + '.png" onError="this.src =\'../img/file/unkown.png\'"></p><span>' + file.name + '</span></div>');
     };
     reader.readAsDataURL(file);
-};
+};
+
+// function getSuffix(item) {
+//     var arr = item.fileName.split(".");
+//     return '../img/file/' + arr[arr.length - 1] + '.png';
+// };

talkview/src/less/app.main.less

@@ -453,6 +453,23 @@ body {
         >img {
             height: 100px;
         }
+        .input-file {
+            margin-bottom: 5px;
+            width: 100px;;
+            font-size: 12px;
+            p {
+                text-align: center;
+            }
+            img {
+                margin-left: -10px;
+                height: 50px;
+            }
+            span {
+                text-align: center;
+                word-wrap:break-word;
+                word-break:break-all;
+            }
+        }
     }
 }