HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

谁借莪１个温暖的怀抱￠ 2024-02-18 21:24 113阅读 0赞

一、同时上传多个文件处理

HTML：

复制代码

  1. <div class="container">
  2.     <div class="panel panel-default">
  3.         <div class="panel-heading">分段读取文件：</div>
  4.         <div class="panel-body" id="bodyOne">
  5.             <input type="file" id="file"  multiple/><br />
  6.         </div>
  7.     </div>
  8. </div>

复制代码

JS：

1.封装单文上传实例

ExpandedBlockStart.gif

复制代码

  1. //封装 单个文件上传实例
  2. (function () {
  3.     var url = 'ws://localhost:55373/ashx/upload4.ashx';
  4.     //指定上传文件，创建上传操作对象
  5.     function uploadOperate(file) {
  6.         var _this = this;
  7.         this.reader = new FileReader();//读取文件对象
  8.         this.step = 1024 * 256;//每次读取文件字节数
  9.         this.curLoaded = 0; //当前读取位置
  10.         this.file = file;   //当前文件对象
  11.         this.enableRead = true; //指定是否可读取,
  12.         this.total = file.size;  //当前文件总大小
  13.         this.startTime = new Date(); //开始读取时间
  14.         //创建显示
  15.         this.createItem();
  16.         this.initWebSocket(function () {
  17.             _this.bindReader();
  18.         });
  19.         console.info('文件大小：' + this.total);
  20.     }
  21.     uploadOperate.prototype = {
  22.         //绑定读取事件
  23.         bindReader: function () {
  24.             var _this = this;
  25.             var reader = this.reader;
  26.             var ws = this.ws;
  27.             reader.onload = function (e) {
  28.                 //判断是否能再次读取
  29.                 if (_this.enableRead == false) return;
  30.                 //根据当前缓冲区 控制读取速度
  31.                 if (ws.bufferedAmount >= _this.step * 20) {
  32.                     setTimeout(function () {
  33.                         _this.loadSuccess(e.loaded);
  34.                     }, 5);
  35.                     console.info('---->进入等待');
  36.                 } else {
  37.                     _this.loadSuccess(e.loaded);
  38.                 }
  39.             }
  40.             //开始读取
  41.             _this.readBlob();
  42.         },
  43.         //读取成功，操作处理
  44.         loadSuccess: function (loaded) {
  45.             var _this = this;
  46.             var ws = _this.ws;
  47.             //使用WebSocket 将二进制输出上传到服务器
  48.             var blob = _this.reader.result;
  49.             if (_this.curLoaded <= 0)
  50.                 ws.send(_this.file.name);
  51.             ws.send(blob);
  52.             //当前发送完成，继续读取
  53.             _this.curLoaded += loaded;
  54.             if (_this.curLoaded < _this.total) {
  55.                 _this.readBlob();
  56.             } else {
  57.                 //发送读取完成
  58.                 ws.send('发送完成');
  59.                 //读取完成
  60.                 console.log('总共上传：' + _this.curLoaded + ',总共用时：' + (new Date().getTime() - _this.startTime.getTime()) / 1000);
  61.             }
  62.             //显示进度等
  63.             _this.showProgress();
  64.         },
  65.         //创建显示项
  66.         createItem: function () {
  67.             var _this = this;
  68.             var blockquote = document.createElement('blockquote');
  69.             var abort = document.createElement('input');
  70.             abort.type = 'button';
  71.             abort.value = '中止';
  72.             abort.onclick = function () {
  73.                 _this.stop();
  74.             };
  75.             blockquote.appendChild(abort);
  77.             var containue = document.createElement('input');
  78.             containue.type = 'button';
  79.             containue.value = '继续';
  80.             containue.onclick = function () {
  81.                 _this.containue();
  82.             };
  83.             blockquote.appendChild(containue);
  85.             var progress = document.createElement('progress');
  86.             progress.style.width = '400px';
  87.             progress.max = 100;
  88.             progress.value = 0;
  89.             blockquote.appendChild(progress);
  90.             _this.progressBox = progress;
  92.             var status = document.createElement('p');
  93.             status.id = 'Status';
  94.             blockquote.appendChild(status);
  95.             _this.statusBox = status;
  97.             document.getElementById('bodyOne').appendChild(blockquote);
  98.         },
  99.         //显示进度
  100.         showProgress: function () {
  101.             var _this = this;
  102.             var percent = (_this.curLoaded / _this.total) * 100;
  103.             _this.progressBox.value = percent;
  104.             _this.statusBox.innerHTML = percent;
  105.         },
  106.         //执行读取文件
  107.         readBlob: function () {
  108.             var blob = this.file.slice(this.curLoaded, this.curLoaded + this.step);
  109.             this.reader.readAsArrayBuffer(blob);
  110.         },
  111.         //中止读取
  112.         stop: function () {
  113.             this.enableRead = false;
  114.             this.reader.abort();
  115.             console.log('读取中止，curLoaded:' + this.curLoaded);
  116.         },
  117.         //继续读取
  118.         containue: function () {
  119.             this.enableRead = true;
  120.             this.readBlob();
  121.             console.log('读取继续，curLoaded:' + this.curLoaded);
  122.         },
  123.         //初始化 绑定创建连接
  124.         initWebSocket: function (onSuccess) {
  125.             var _this = this;
  126.             var ws = this.ws = new WebSocket(url); //初始化上传对象
  127.             ws.onopen = function () {
  128.                 console.log('connect创建成功');
  129.                 if (onSuccess)
  130.                     onSuccess();
  131.             }
  132.             ws.onmessage = function (e) {
  133.                 var data = e.data;
  134.                 if (isNaN(data) == false) {
  135.                     console.info('后台接收成功：' + data);
  136.                 } else {
  137.                     console.info(data);
  138.                 }
  139.             }
  140.             ws.onclose = function (e) {
  141.                 //中止读取
  142.                 _this.stop();
  143.                 console.log('connect已经断开');
  144.             }
  145.             ws.onerror = function (e) {
  146.                 //中止读取
  147.                 _this.stop();
  148.                 console.log('发生异常：' + e.message);
  149.             }
  150.         }
  151.     };
  152.     window.uploadOperate = uploadOperate;
  153. })();

复制代码

2.绑定页面处理

复制代码

  1. /*
  2. * 测试WebSocket多文件上传
  3. * 上传速度取决于 每次send() 的数据大小 ，Google之所以相对比较慢，是因为每次send的数据量太小
  4. */
  5. var fileBox = document.getElementById('file');
  6. fileBox.onchange = function () {
  7.     var files = this.files;
  8.     for (var i = 0; i < files.length; i++) {
  9.         var file = files[i];
  10.         var operate = new uploadOperate(file);
  11.     }
  12. }

复制代码

服务器后台封装处理：

ExpandedBlockStart.gif

复制代码

  1. public void ProcessRequest(HttpContext context)
  2.     {
  3.         //处理WebSocket 请求
  4.         context.AcceptWebSocketRequest(DoWork);
  5.     }
  6.     /// <summary>
  7.     /// 委托处理函数定义
  8.     /// </summary>
  9.     /// <param name="context">当前WebSocket上下文</param>
  10.     /// <returns></returns>
  11.     public async Task DoWork(AspNetWebSocketContext context)
  12.     {
  13.         //1.获取当前WebSocket 对象
  14.         WebSocket socket = context.WebSocket;
  15.         string filename = "";
  16.         byte[] bufferAll = new byte[1024 * 256 * 2];//缓存接收文件
  18.         //Array.Copy
  19.         //byte[] bufferAll = new byte[];
  20.         int loaded = 0;  //当前缓冲数量
  21.         //2.监视相应
  22.         while (true)
  23.         {
  24.             /*
  25.                 * 此处缓存数组指定读取客户端数据的长度
  26.                 * 如果客户端发送数据超过当前缓存区，则会读取多次
  27.                 */
  28.             ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024 * 256]);
  29.             //接收客户端信息
  30.             CancellationToken token;
  31.             WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, token);
  32.             if (socket.State == WebSocketState.Open)
  33.             {
  34.                 //判断是否已经到了最后
  35.                 int curLength = Math.Min(buffer.Array.Length, result.Count);
  36.                 try
  37.                 {
  38.                     //判断用户传入的类型进行处理
  39.                     if (result.MessageType == WebSocketMessageType.Text)
  40.                     {
  41.                         string msg = Encoding.UTF8.GetString(buffer.Array, 0, curLength);
  42.                         if (msg == "发送完成")
  43.                         {
  44.                             //发送完成，全部写入文件
  45.                             string str = SaveFile(filename, bufferAll, loaded);
  46.                             loaded = 0;
  47.                             ArraySegment<byte> echor = new ArraySegment<byte>(Encoding.UTF8.GetBytes(curLength.ToString()));
  48.                             await socket.SendAsync(echor, WebSocketMessageType.Text, true, CancellationToken.None);
  49.                         }
  50.                         else
  51.                         {
  52.                             filename = msg;
  53.                             msg = string.Format("服务器链接数量：{0},当前链接ID={1},接收文件名：{2}",
  54.                             AspNetWebSocketContext.ConnectionCount, context.AnonymousID, filename);
  55.                             ArraySegment<byte>  echor = new ArraySegment<byte>(Encoding.UTF8.GetBytes(msg));
  56.                             await socket.SendAsync(echor, WebSocketMessageType.Text, true, CancellationToken.None);
  57.                         }
  58.                     }
  59.                     else if (result.MessageType == WebSocketMessageType.Binary)
  60.                     {
  61.                         var temp = loaded + curLength;
  62.                         if ((temp) > bufferAll.Length)
  63.                         {
  64.                             //先写入文件
  65.                             string msg = SaveFile(filename, bufferAll, loaded);
  66.                             //添加到缓冲区
  67.                             Array.Copy(buffer.Array, 0, bufferAll, 0, curLength);
  68.                             loaded = curLength;
  69.                             //返回相应
  70.                             ArraySegment<byte> echor = new ArraySegment<byte>(Encoding.UTF8.GetBytes(curLength.ToString()));
  71.                             await socket.SendAsync(echor, WebSocketMessageType.Text, true, CancellationToken.None);
  72.                         }
  73.                         else
  74.                         {
  75.                             //添加到缓冲区
  76.                             Array.Copy(buffer.Array, 0, bufferAll, loaded, curLength);
  77.                             loaded = temp;
  78.                         }
  79.                     }
  80.                 }
  81.                 catch (Exception ex)
  82.                 {
  85.                 }
  86.             }
  87.             else { break; }
  88.         }
  89.     }
  90.     /// <summary>
  91.     /// 追加二进制数据到文件
  92.     /// </summary>
  93.     public string SaveFile(string file, byte[] buffer, int Length)
  94.     {
  95.         //去除文件名中的前后空格
  96.         file = file.Trim();
  97.         string fullname = @"F:\JavaScript_Solution\H5Solition\UploadWebForm\content\" + file;
  98.         try
  99.         {
  100.             FileStream fs = new FileStream(fullname, FileMode.Append, FileAccess.Write);
  101.             try
  102.             {
  103.                 //byte[] result = buffer.ToArray();
  104.                 //fs.Write(result, 0, Length);
  105.                 fs.Write(buffer, 0, Length);
  106.             }
  107.             finally
  108.             {
  109.                 fs.Close();
  110.             }
  111.             return "保存文件成功";
  112.         }
  113.         catch (Exception ex)
  114.         {
  115.             return ex.Message;
  116.         }
  117.     }

复制代码

运行结果显示：

470800-20160908114452769-1069805538.png

更多Demo源代码：

http://git.oschina.net/tiama3798/HTML5Demo/tree/WebSocket/

http://git.oschina.net/tiama3798/HTML5Demo/tree/FileReader/

发表评论

表情：
评论列表 （有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读