一步一步搭建客服系统 (5) 发送图片、文件

客服系统里,经常要发送图片文件,对方可以直接看到图片;如果发送文件,对方可以download下来。

 

1 发送图片文件

先利用jquery uploadify来上传图片:

 

相关的三个images下的文件:

http://yunpan.cn/cHgDdAGNUeMcF  访问密码 7705

 

在后台把文件保存下来:

 

完成之后,首先在自己的聊天框显示图片,然后再发送给对方:

 

这里是发送给所有人:

webrtc.sendToAll('chat', { message: img, nick: webrtc.config.nick });

 

2 发送文件

  • 当有人进入聊天时,会有一个peer参数传进来,创建一个文件上传的按钮:

webrtc.on('createdPeer', function (peer) {

……

var fileinput = document.createElement('input');
fileinput.type = 'file';

 

  • 为文件上传按钮添加change的事件,并用传进来的peer来发送文件:

fileinput.addEventListener('change', function () {

var file = fileinput.files[0];
var sender = peer.sendFile(file);

  • 接收方用peer的fileTransfer事件来接收文件

// receiving an incoming filetransfer
peer.on('fileTransfer', function (metadata, receiver) {

 

  • 发送方和接收方都可以用progress事件来实现进度条效果:

// hook up send progress
sender.on('progress', function (bytesSent) {
    sendProgress.value = bytesSent;
});

 

// hook up receive progress
receiver.on('progress', function (bytesReceived) {
   receiveProgress.value = bytesReceived;
});

 

最终效果图:

clip_image002

完整代码如下:

 

如果不清楚webrtc为何物,请参考《3分钟实现网页版多人文本、视频聊天室 (含完整源码)》。

 

一步一步搭建客服系统

 

 

.



如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
posted @   疯吻IT  阅读(1746)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示