js+html+jquery 实现与websocket通信多文件上传并且带进度条

最新推荐文章于 2024-05-07 04:56:22 发布

一个喜欢弹吉他的程序猿

最新推荐文章于 2024-05-07 04:56:22 发布

阅读量1.8k

点赞数 3

本文链接：https://blog.csdn.net/qq_43482627/article/details/108469268

版权

一：成品演示：
在这里插入图片描述

二：话不多说，直接上代码。

<!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])
            }
        }
 }

前端不复杂，主要是后端处理数据。后端我就不展开记录了。

如果文章对你有用，不妨点个赞呗。

一个喜欢弹吉他的程序猿

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
js+html+jquery 实现与websocket通信多文件上传并且带进度条

一：成品演示：二：话不多说，直接上代码。<!DOCTYPE html><html><head> <title>WebSocket Chat Client</title> <meta charset="utf-8" /> <style> .progress { width: 200px; height: 20px;
复制链接

扫一扫