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

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

先利用jquery uploadify来上传图片：

function () { $("#uploadify").uploadify({ 'uploader': 'Images/uploadify.swf', 'script': 'Handler/UploadFile.ashx', 'cancelImg': 'Images/cancel.png', 'folder': 'UploadFiles/', 'queueID': 'fileQueue', 'buttonImg': 'Images/uploadify.jpg', 'auto': true, 'multi': true, 'fileExt': '*.jpg;*.jpeg;*.gif;*.png;', 'onComplete': function (event, queueID, fileObj, response, data) { SendImg(fileObj); } }) })

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;
});

最终效果图：

完整代码如下：

//// 3. transfer files // called when a peer is created webrtc.on('createdPeer', function (peer) { console.log('createdPeer', peer); var transferFiles = document.getElementById('transferFiles'); if (!transferFiles || peer.type =='screen') return; var container = document.createElement('div'); container.className = 'peerContainer'; container.id = 'container_' + webrtc.getDomId(peer); //// show the peer id //var peername = document.createElement('div'); //peername.className = 'peerName'; //peername.appendChild(document.createTextNode('Peer: ' + peer.id)); //container.appendChild(peername); // show a list of files received / sending var filelist = document.createElement('ul'); filelist.className = 'fileList'; container.appendChild(filelist); // show a file select form var fileinput = document.createElement('input'); fileinput.type = 'file'; // send a file fileinput.addEventListener('change', function () { fileinput.disabled = true; var file = fileinput.files[0]; var sender = peer.sendFile(file); // create a file item var item = document.createElement('li'); item.className = 'sending'; // make a label var span = document.createElement('span'); span.className = 'filename'; span.appendChild(document.createTextNode(file.name)); item.appendChild(span); // create a progress element var sendProgress = document.createElement('progress'); sendProgress.max = file.size; item.appendChild(sendProgress); span = document.createElement('span'); span.style.cssText = 'float:right;'; span.appendChild(document.createTextNode(' ' + Math.round(file.size / 1024 / 1024 * 100) / 100 + ' MB')); item.appendChild(span); // hook up send progress sender.on('progress', function (bytesSent) { sendProgress.value = bytesSent; }); // sending done sender.on('sentFile', function () { item.appendChild(document.createTextNode('Sent')); // we allow only one filetransfer at a time fileinput.removeAttribute('disabled'); }); // receiver has actually received the file sender.on('complete', function () { // safe to disconnect now }); filelist.appendChild(item); }, false); fileinput.disabled = 'disabled'; container.appendChild(fileinput); // show the ice connection state if (peer && peer.pc) { var connstate = document.createElement('div'); connstate.className = 'connectionstate'; container.appendChild(connstate); peer.pc.on('iceConnectionStateChange', function (event) { var state = peer.pc.iceConnectionState; console.log('state', state); container.className = 'peerContainer p2p' + state.substr(0, 1).toUpperCase() + state.substr(1); switch (state) { case 'connected': case 'completed': // on caller side //connstate.innerText = 'Connection established.'; // enable file sending on connnect console.log('connection established'); fileinput.removeAttribute('disabled'); $('#send').prop('disabled', false); //$('#send').prop('disabled', false); break; case 'checking': //connstate.innerText = 'Connecting to peer...'; console.log('Connecting to peer...'); break; case 'disconnected': //connstate.innerText = 'Disconnected.'; console.log('disconnected'); //break; case 'failed': // not handled here //break; case 'closed': //connstate.innerText = 'Connection closed.'; // disable file sending fileinput.disabled = 'disabled'; fileinput.hidden = 'true'; $('#send').prop('disabled', true); //$('#end').prop('disabled', true); // FIXME: remove container, but when? break; } }); } transferFiles.appendChild(container); // receiving an incoming filetransfer peer.on('fileTransfer', function (metadata, receiver) { console.log('incoming filetransfer', metadata); var item = document.createElement('li'); item.className = 'receiving'; // make a label var span = document.createElement('span'); span.className = 'filename'; span.appendChild(document.createTextNode(metadata.name)); item.appendChild(span); // create a progress element var receiveProgress = document.createElement('progress'); receiveProgress.max = metadata.size; item.appendChild(receiveProgress); span = document.createElement('span'); span.style.cssText = 'float:right;'; span.appendChild(document.createTextNode(Math.round(metadata.size / 1024 / 1024 * 100) / 100 + ' MB')); item.appendChild(span); // hook up receive progress receiver.on('progress', function (bytesReceived) { receiveProgress.value = bytesReceived; }); // get notified when file is done receiver.on('receivedFile', function (file, metadata) { console.log('received file', metadata.name, metadata.size); var href = document.createElement('a'); href.href = URL.createObjectURL(file); href.download = metadata.name; href.appendChild(document.createTextNode('Download')); item.appendChild(href); // close the channel receiver.channel.close(); }); filelist.appendChild(item); }); });

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