2019-07-28 10:31:56 +08:00
|
|
|
<html>
|
2017-05-20 11:37:15 +08:00
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>WebSocket Test</title>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="panel panel-default">
|
2019-07-28 10:31:56 +08:00
|
|
|
<div class="panel-heading"> 分段读取文件：</div>
|
2017-05-20 11:37:15 +08:00
|
|
|
<div class="panel-body">
|
|
|
|
|
<input type="file" id="fileId" /><br />
|
2019-07-28 10:31:56 +08:00
|
|
|
<input type="button" value="中止" onclick="stop();" /> <br />
|
|
|
|
|
<input type="button" value="继续" onclick="goon();" />
|
2017-05-20 11:37:15 +08:00
|
|
|
<progress id="progressOne" style="width:400px;" max="100" value="0"></progress>
|
|
|
|
|
<blockquote id="status" style="word-break:break-all;"></blockquote>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
2019-07-28 10:31:56 +08:00
|
|
|
<a href="https://github.com/zhengshuxin/acl/tree/master/lib_acl_cpp/samples/websocket/upload_server" target=_blank>源码</a>
|
2017-05-20 11:37:15 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
|
|
|
var g_url = null;
|
|
|
|
|
var g_ws = null;
|
|
|
|
|
var g_fileBox = document.getElementById('fileId');
|
|
|
|
|
var g_reader = null;
|
|
|
|
|
var g_step = 1024 * 128;
|
|
|
|
|
var g_loaded = 0;
|
|
|
|
|
var g_total = 0;
|
|
|
|
|
var g_file = null;
|
|
|
|
|
var g_enableRead = true;
|
|
|
|
|
|
|
|
|
|
g_fileBox.onchange = function() {
|
|
|
|
|
g_file = this.files[0];
|
|
|
|
|
g_total = g_file.size;
|
|
|
|
|
if (g_ws == null)
|
|
|
|
|
createSocket(function() { bindReader(); });
|
|
|
|
|
else
|
|
|
|
|
bindReader();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function bindReader() {
|
|
|
|
|
g_loaded = 0;
|
|
|
|
|
g_reader = new FileReader();
|
|
|
|
|
g_reader.onload = function(e) {
|
|
|
|
|
if (g_enableRead == false)
|
|
|
|
|
return;
|
|
|
|
|
if (g_ws.bufferedAmount > g_step * 10)
|
|
|
|
|
setTimeout(function() { loadSuccess(e.loaded); }, 100);
|
|
|
|
|
else
|
|
|
|
|
loadSuccess(e.loaded);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
readBlob();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function loadSuccess(loaded) {
|
|
|
|
|
var blob = g_reader.result;
|
|
|
|
|
if (g_loaded == 0) {
|
|
|
|
|
g_ws.send(g_file.name);
|
|
|
|
|
var len = "" + g_file.size;
|
|
|
|
|
g_ws.send(len);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
g_ws.send(blob);
|
|
|
|
|
g_loaded += loaded;
|
|
|
|
|
|
|
|
|
|
if (g_loaded < g_total)
|
|
|
|
|
readBlob();
|
|
|
|
|
var percent = Math.round((g_loaded * 100) / g_total);
|
|
|
|
|
document.getElementById('status').innerText = percent + "%";
|
|
|
|
|
document.getElementById('progressOne').value = percent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function readBlob() {
|
|
|
|
|
var blob = g_file.slice(g_loaded, g_loaded + g_step);
|
|
|
|
|
g_reader.readAsArrayBuffer(blob);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function stop() {
|
|
|
|
|
g_enableRead = false;
|
|
|
|
|
g_reader.abort();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function goon() {
|
|
|
|
|
g_enableRead = true;
|
|
|
|
|
readBlob();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function createSocket(onSuccess) {
|
|
|
|
|
g_ws = new WebSocket(g_url);
|
|
|
|
|
g_ws.onopen = function() {
|
|
|
|
|
if (onSuccess)
|
|
|
|
|
onSuccess();
|
|
|
|
|
g_ws.onmessage = function(e) {}
|
|
|
|
|
}
|
|
|
|
|
g_ws.onclose = function(e) { g_ws.close(); g_ws = null; }
|
|
|
|
|
g_ws.onerror = function(e) { g_ws.close(); g_ws = null; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test() {
|
|
|
|
|
var o = document.getElementById('fileId');
|
|
|
|
|
alert("o: " + o);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
