-
Notifications
You must be signed in to change notification settings - Fork 0
/
binary-event-index.html
106 lines (80 loc) · 2.69 KB
/
binary-event-index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Chat</title>
<link href="bootstrap.css" rel="stylesheet">
<style>
body {
padding:20px;
}
#console {
height: 400px;
overflow: auto;
}
.username-msg {color:orange;}
.connect-msg {color:green;}
.disconnect-msg {color:red;}
.send-msg {color:#888}
</style>
<script src="js/socket.io/socket.io-1.3.7.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
var socket = io.connect('http://localhost:9092');
socket.on('connect', function() {
alert('socketio client connected');
});
socket.on('msg', function(file) {
debugger;
var arrayBuffer = new Uint8Array(file).buffer;
var blob = new Blob([arrayBuffer]);
var imgList = $('ul#img-list');
var li = $('<li/>').appendTo(imgList);
$('<div/>').text(file.name).appendTo(li);
var img = $('<img/>').appendTo(li);
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
debugger;
aImg.attr('src', e.target.result);
aImg.attr('width', 150);
};
})(img);
reader.readAsDataURL(blob);
});
$(document).ready(function() {
var fileInput = $('#file-field');
fileInput.bind({
change: function() {
displayFiles(this.files);
}
});
function displayFiles(files) {
$.each(files, function(i, file) {
debugger;
// if (!file.type.match(/image.*/)) {
// return true;
// }
var reader = new FileReader();
reader.onload = function(e) {
socket.emit('msg', e.target.result);
};
reader.readAsArrayBuffer(file);
});
}
});
</script>
</head>
<body>
Please upload any image file.
<br/>
<br/>
<div>
<input type="file" name="file" id="file-field" />
</div>
<div id="img-container">
<ul id="img-list"></ul>
</div>
</body>
</html>