# 7.聊天室功能 - 发送图片
# (1).发送图片消息
// 发送图片的功能
$("#file").on("change", function () {
var file = this.files[0];
// 需要把这个文件发送到服务器, 借助于H5新增的fileReader
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function () {
// console.log(fr.result);
socket.emit("sendImage", {
username: username,
avatar: avatar,
img: fr.result,
});
};
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# (2).接收图片消息
// 监听图片聊天信息
socket.on("receiveImage", (data) => {
console.log(data);
// 把接收到的消息显示到聊天窗口中
// 判断当前用户是不是自己
if (data.username === username) {
// 自己的消息
} else {
// 别人的消息
}
// 这里需要等待图片加载完成, 才能滚动到底部
$(".box-bd img:last").on("load", function () {
scrollIntoView();
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16