一：成品演示：
二：话不多说，直接上代码。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat Client</title>
<meta charset="utf-8" />
<style>
.progress {
width: 200px;
height: 20px;
background: #ddd;
position: relative;
}
.info {
width: 0px;
height: 20px;
background: #ec5710;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript" src="../upload/jquery-1.6.4/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="../upload/jquery.json-2.3/jquery.json-2.3.min.js"></script>
<script type="text/javascript">
$().ready(
function () {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList
&& window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
});
//在消息框中打印内容
function log(text) {
$("#log").append(text + "\n");
}
function readFile(file) {
var oInfo = document.getElementById("info");
var oRes = document.getElementById("result");
var reader = new FileReader();
//reader.readAsDataURL(file);
reader.readAsArrayBuffer(file);
reader.onprogress = function (e) {
oInfo.style.width = e.loaded / e.total * 200 + "px";
oRes.innerHTML = Math.round((e.loaded / e.total * 200) * 0.5) + "%";
}
reader.onload = function (e) {
ws.send(file.name);
log('发送' + file.name + '成功!');
fileData = reader.result;
//var binary = fileData.slice(0, 1000);
//ws.send(binary);
var date = [];
var n = 1000;
for (var i = 0, l = fileData.byteLength; i < l / n; i++) {
var a = fileData.slice(n * i, n * (i + 1));
date.push(a);
}
for (i = 0; i < date.length; i++) {
ws.send(date[i])
}
}
}
//全局的websocket变量
var ws;
var paragraph = 10485760;
var fileList;
var file;
var startSize, endSize = 0;
var i = 0; j = 0;
var fileData;
//连接服务器
$(function () {
$("#connect").click(function () {
ws = new WebSocket($("#url").val());
//连接成功建立后响应
ws.onopen = function () {
log("成功连接到" + $("#url").val());
}
//收到服务器消息后响应
ws.onmessage = function (e) {
//连接关闭后响应
ws.onclose = function () {
log("关闭连接");
ws = null;
}
return false;
}
});
});
$(function () {
$("#sendFileForm").click(function () {
fileList = document.getElementById("file").files;
if (fileList) {
for (i = 0; i < fileList.length; i++) {
readFile(fileList[i]);
}
}
})
});
$(function () {
$("#reset").click(function () {
$("#log").empty();
return false;
});
});
</script>
</head>
<body>
<span>Html5功能测试</span><br />
<input type="text" id="url" value="ws://localhost:9003" style="width: 200px;"> <input type="button" id="connect"
value="Connect"><input type="button" id="disconnect" value="Disconnect" disabled="disabled">
<form>
<input id="file" type="file" multiple />
<input type="button" id="sendFileForm" value="测试" />
<input type="button" id="reset" value="清空消息框" />
<div class="progress">
<div class="info" id="info"></div>
</div>
<div id="result"></div>
</form>
<form>
<textarea id="log" rows="30" cols="100" style="font-family: monospace; color: red;"></textarea>
</form>
</body>
</html>
注：源码已上传github。
https://github.com/fulin-z/html-js-jquery
三：代码详解
主要思路：画出静态页面–>连接websocket服务器–>读取文件转二进制–>发送给websocket服务器
1.html标签画出静态页面
<body>
<span>Html5功能测试</span><br />
<input type="text" id="url" value="ws://localhost:9003" style="width: 200px;"> <input type="button" id="connect"
value="Connect"><input type="button" id="disconnect" value="Disconnect" disabled="disabled">
<form>
<input id="file" type="file" multiple />
<input type="button" id="sendFileForm" value="测试" />
<input type="button" id="reset" value="清空消息框" />
<!-- 下面两个div用于实现进度条-->
<div class="progress">
<div class="info" id="info"></div>
</div>
<div id="result"></div>
</form>
<form>
<textarea id="log" rows="30" cols="100" style="font-family: monospace; color: red;"></textarea>
</form>
</body>
<style>
.progress {
width: 200px;
height: 20px;
background: #ddd;
position: relative;
}
.info {
width: 0px;
height: 20px;
background: #ec5710;
position: absolute;
left: 0;
top: 0;
}
</style>
2.连接websocket服务器
var ws = new WebSocket(服务器地址);
3.实现多文件上传
$(function () {
$("#sendFileForm").click(function () {
//获取所有文件
fileList = document.getElementById("file").files;
//循环发送
if (fileList) {
for (i = 0; i < fileList.length; i++) {
readFile(fileList[i]);
}
}
})
});
4.文件发送
function readFile(file) {
var oInfo = document.getElementById("info");
var oRes = document.getElementById("result");
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onprogress = function (e) {
//控制div的宽度，来实现进度条的效果
oInfo.style.width = e.loaded / e.total * 200 + "px";
oRes.innerHTML = Math.round((e.loaded / e.total * 200) * 0.5) + "%";
}
reader.onload = function (e) {
ws.send(file.name);//send()方法发送文件名给服务器
log('发送' + file.name + '成功!');
fileData = reader.result;
var date = [];
var n = 1000;
//将获取的二进制按1000等分，合并成数组
//因为字节太长，后台接收不到
for (var i = 0, l = fileData.byteLength; i < l / n; i++) {
var a = fileData.slice(n * i, n * (i + 1));
date.push(a);
}
//将等分好的数组，循环发送给服务器
for (i = 0; i < date.length; i++) {
ws.send(date[i])
}
}
}
前端不复杂，主要是后端处理数据。后端我就不展开记录了。
如果文章对你有用，不妨点个赞呗。