time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > HTML5使用websocket实现多文件同时上传示例

HTML5使用websocket实现多文件同时上传示例

时间:2012-12-19 21:39 点击:5732次 字体:[ ]




 在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些基于SWF的文件上传组件提供这种的便利性.到了HTML5下对文件的读取和上传的控制方面就非常灵活,HTML5提供一系列的AIP进行文件读取,包括计取文件某一块的内容也非常方便,结合Websocket进行文件的传输就变得更加方便和灵活.下面通过使用HTML5结合websocet简单地实现多文件同时上传应用.

实现功能

大概预览一下需要做的功能:

HTML5使用websocket实现多文件同时上传示例_www.fengfly.com

主要功能是用户可以直接把文件夹的文件直接拖放到网页中,并进行上传,在上传的过程中显示上传进度信息.

FileInfo类封装

为了方便读取文件信息,在原有File的基础封装了一个简单文件信息读取的对象类.

  1. function FileInfo(file, pagesize) { 
  2.  
  3.     this.Size = file.size; 
  4.  
  5.     this.File = file; 
  6.  
  7.     this.FileType = file.type; 
  8.  
  9.     this.FileName = file.name; 
  10.  
  11.     this.PageSize = pagesize; 
  12.  
  13.     this.PageIndex = 0; 
  14.  
  15.     this.Pages = 0; 
  16.  
  17.     this.UploadError = null
  18.  
  19.     this.UploadProcess = null
  20.  
  21.     this.DataBuffer = null
  22.  
  23.     this.UploadBytes = 0; 
  24.  
  25.     this.ID = Math.floor(Math.random() * 0x10000).toString(16); 
  26.  
  27.     this.LoadCallBack = null
  28.  
  29.     if (Math.floor(this.Size % this.PageSize) > 0) { 
  30.  
  31.         this.Pages = Math.floor((this.Size / this.PageSize)) + 1; 
  32.  
  33.   
  34.  
  35.     } 
  36.  
  37.     else { 
  38.  
  39.         this.Pages = Math.floor(this.Size / this.PageSize); 
  40.  
  41.   
  42.  
  43.     } 
  44.  
  45.   
  46.  
  47.  
  48. FileInfo.prototype.Reset = function () { 
  49.  
  50.     this.PageIndex = 0; 
  51.  
  52.     this.UploadBytes = 0; 
  53.  
  54.  
  55. FileInfo.prototype.toBase64String = function () { 
  56.  
  57.     var binary = '' 
  58.  
  59.     var bytes = new Uint8Array(this.DataBuffer) 
  60.  
  61.     var len = bytes.byteLength; 
  62.  
  63.   
  64.  
  65.     for (var i = 0; i < len; i++) { 
  66.  
  67.         binary += String.fromCharCode(bytes[i]) 
  68.  
  69.     } 
  70.  
  71.     return window.btoa(binary); 
  72.  
  73.  
  74. FileInfo.prototype.OnLoadData = function (evt) { 
  75.  
  76.     var obj = evt.target["tag"]; 
  77.  
  78.   
  79.  
  80.     if (evt.target.readyState == FileReader.DONE) { 
  81.  
  82.         obj.DataBuffer = evt.target.result; 
  83.  
  84.         if (obj.LoadCallBack != null
  85.  
  86.             obj.LoadCallBack(obj); 
  87.  
  88.   
  89.  
  90.     } 
  91.  
  92.     else { 
  93.  
  94.         if (obj.UploadError != null
  95.  
  96.             obj.UploadError(fi, evt.target.error); 
  97.  
  98.     } 
  99.  
  100.   
  101.  
  102.  
  103.   
  104.  
  105. FileInfo.prototype.Load = function (completed) { 
  106.  
  107.     this.LoadCallBack = completed; 
  108.  
  109.     if (this.filereader == null || this.filereader == undefined) 
  110.  
  111.         this.filereader = new FileReader(); 
  112.  
  113.     var reader = this.filereader; 
  114.  
  115.     reader["tag"] = this
  116.  
  117.     reader.onloadend = this.OnLoadData; 
  118.  
  119.     var count = this.Size - this.PageIndex * this.PageSize; 
  120.  
  121.     if (count > this.PageSize) 
  122.  
  123.         count = this.PageSize; 
  124.  
  125.     this.UploadBytes += count; 
  126.  
  127.     var blob = this.File.slice(this.PageIndex * this.PageSize, this.PageIndex * this.PageSize + count); 
  128.  
  129.   
  130.  
  131.     reader.readAsArrayBuffer(blob); 
  132.  
  133. }; 
  134.  
  135.   
  136.  
  137. FileInfo.prototype.OnUploadData = function (file) { 
  138.  
  139.     var channel = file._channel; 
  140.  
  141.     var url = file._url; 
  142.  
  143.     channel.Send({ url: url, parameters: { FileID: file.ID, PageIndex: file.PageIndex, Pages: file.Pages, Base64Data: file.toBase64String()} }, function (result) { 
  144.  
  145.         if (result.status == null || result.status == undefined) { 
  146.  
  147.             file.PageIndex++; 
  148.  
  149.             if (file.UploadProcess != null
  150.  
  151.                 file.UploadProcess(file); 
  152.  
  153.             if (file.PageIndex < file.Pages) { 
  154.  
  155.                 file.Load(file.OnUploadData); 
  156.  
  157.             } 
  158.  
  159.         } 
  160.  
  161.         else { 
  162.  
  163.   
  164.  
  165.             if (file.UploadError != null
  166.  
  167.                 file.UploadError(file, data.status); 
  168.  
  169.         } 
  170.  
  171.     }); 
  172.  
  173.  
  174.   
  175.  
  176. FileInfo.prototype.Upload = function (channel, url) { 
  177.  
  178.     var fi = this
  179.  
  180.     channel.Send({ url: url, parameters: { FileName: fi.FileName, Size: fi.Size, FileID: fi.ID} }, function (result) { 
  181.  
  182.         if (result.status == null || result.status == undefined) { 
  183.  
  184.             fi._channel = channel; 
  185.  
  186.             fi._url = result.data; 
  187.  
  188.             fi.Load(fi.OnUploadData); 
  189.  
  190.         } 
  191.  
  192.         else { 
  193.  
  194.             if (file.UploadError != null
  195.  
  196.                 file.UploadError(fi, result.status); 
  197.  
  198.         } 
  199.  
  200.     }); 
  201.  
  202.   
  203.  



本文地址 : http://www.fengfly.com/plus/view-210990-1.html
标签: HTML5 websocke
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: