当前位置：Gxlcms > html代码 > html5中文件域+FileReader分段读取文件并上传到服务器的案例

html5中文件域+FileReader分段读取文件并上传到服务器的案例

时间：2021-07-01 10:21:17 帮助过：27人阅读

1.简单分段读取文件为Blob，ajax上传到服务器


  1. <p class="container">
  2.     <p class="panel panel-default">
  3.         <p class="panel-heading">分段读取文件：</p>
  4.         <p class="panel-body">
  5.             <input type="file" id="file" />
  6.             <blockquote style="word-break:break-all;"></blockquote>
  7.         </p>
  8.     </p>
  9. </p>

JS：


  1. /*
  2. * 分段读取文件为blob ，并使用ajax上传到服务器
  3. * 分段上传exe文件会抛出异常
  4. */
  5. var fileBox = document.getElementById('file');
  6. file.onchange = function () {
  7.     //获取文件对象
  8.     var file = this.files[0];
  9.     var reader = new FileReader();
  10.     var step = 1024 * 1024;
  11.     var total = file.size;
  12.     var cuLoaded = 0;
  13.     console.info("文件大小：" + file.size);
  14.     var startTime = new Date();
  15.     //读取一段成功
  16.     reader.onload = function (e) {
  17.         //处理读取的结果
  18.         var loaded = e.loaded;
  19.         //将分段数据上传到服务器
  20.         uploadFile(reader.result, cuLoaded, function () {
  21.             console.info('loaded:' + cuLoaded + 'current:' + loaded);
  22.             //如果没有读完，继续
  23.             cuLoaded += loaded;
  24.             if (cuLoaded < total) {
  25.                 readBlob(cuLoaded);
  26.             } else {
  27.                 console.log('总共用时：' + (new Date().getTime() - startTime.getTime()) / 1000);
  28.                 cuLoaded = total;
  29.             }
  30.         });
  31.     }
  32.     //指定开始位置，分块读取文件
  33.     function readBlob(start) {
  34.         //指定开始位置和结束位置读取文件
  35.         //console.info('start:' + start);
  36.         var blob = file.slice(start, start + step);
  37.         reader.readAsArrayBuffer(blob);
  38.     }
  39.     //开始读取
  40.     readBlob(0);
  41.     //关键代码上传到服务器
  42.     function uploadFile(result, startIndex, onSuccess) {
  43.         var blob = new Blob([result]);
  44.         //提交到服务器
  45.         var fd = new FormData();
  46.         fd.append('file', blob);
  47.         fd.append('filename', file.name);
  48.         fd.append('loaded', startIndex);
  49.         var xhr = new XMLHttpRequest();
  50.         xhr.open('post', '../ashx/upload2.ashx', true);
  51.         xhr.onreadystatechange = function () {
  52.             if (xhr.readyState == 4 && xhr.status == 200) {
  53.                 // var data = eval('(' + xhr.responseText + ')');
  54.                 console.info(xhr.responseText);
  55.                 if (onSuccess)
  56.                     onSuccess();
  57.             }
  58.         }
  59.         //开始发送
  60.         xhr.send(fd);
  61.     }
  62. }

后台代码：


  1. /// <summary>
  2. /// upload2 的摘要说明
  3. /// </summary>
  4. public class upload2 : IHttpHandler
  5. {
  6.     LogHelper.LogHelper _log = new LogHelper.LogHelper();
  7.     int totalCount = 0;
  8.     public void ProcessRequest(HttpContext context)
  9.     {
  10.         HttpContext _Context = context;
  11.         //接收文件
  12.         HttpRequest req = _Context.Request;
  13.         if (req.Files.Count <= 0)
  14.         {
  15.             WriteStr("获取服务器上传文件失败");
  16.             return;
  17.         }
  18.         HttpPostedFile _file = req.Files[0];
  19.         //获取参数
  20.         // string ext = req.Form["extention"];
  21.         string filename = req.Form["filename"];
  22.         //如果是int 类型当文件大的时候会出问题 最大也就是 1.9999999990686774G
  23.         int loaded = Convert.ToInt32(req.Form["loaded"]);
  24.         totalCount += loaded;
  25.         string newname = @"F:\JavaScript_Solution\H5Solition\H5Solition\Content\TempFile\";
  26.         newname += filename;
  27.         //接收二级制数据并保存
  28.         Stream stream = _file.InputStream;
  29.         if (stream.Length <= 0)
  30.             throw new Exception("接收的数据不能为空");
  31.         byte[] dataOne = new byte[stream.Length];
  32.         stream.Read(dataOne, 0, dataOne.Length);
  33.         FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, 1024);
  34.         try
  35.         {
  36.             fs.Write(dataOne, 0, dataOne.Length);
  37.         }
  38.         finally
  39.         {
  40.             fs.Close();
  41.             stream.Close();
  42.         }
  43.         _log.WriteLine((totalCount + dataOne.Length).ToString());
  44.         WriteStr("分段数据保存成功");
  45.     }
  46.     private void WriteStr(string str)
  47.     {
  48.         HttpContext.Current.Response.Write(str); 
  49.     }
  50.     public bool IsReusable
  51.     {
  52.         get
  53.         {
  54.             return true;
  55.         }
  56.     }

2.分段读取文件为blob ，并使用ajax上传到服务器，追加中止、继续功能操作


  1. <p class="container">
  2.     <p class="panel panel-default">
  3.         <p class="panel-heading">分段读取文件：</p>
  4.         <p class="panel-body">
  5.             <input type="file" id="file" />
  6.             <br />
  7.             <input type="button" value="中止" onclick="stop();" />&emsp;
  8.             <input type="button" value="继续" onclick="containue();" />
  9.             <br />
  10.             <progress id="progressOne" max="100" value="0" style="width:400px;"></progress>
  11.             <blockquote id="Status" style="word-break:break-all;"></blockquote>
  12.         </p>
  13.     </p>
  14. </p>

JS:


  1. /*
  2. * 分段读取文件为blob ，并使用ajax上传到服务器
  3. * 使用Ajax方式提交上传数据文件大小应该有限值，最好500MB以内
  4. * 原因短时间过多的ajax请求，Asp.Net后台会崩溃获取上传的分块数据为空
  5. * 取代方式，长连接或WebSocket
  6. */
  7. var fileBox = document.getElementById('file');
  8. var reader = null;  //读取操作对象
  9. var step = 1024 * 1024 * 3.5;  //每次读取文件大小
  10. var cuLoaded = 0; //当前已经读取总数
  11. var file = null; //当前读取的文件对象
  12. var enableRead = true;//标识是否可以读取文件
  13. fileBox.onchange = function () {
  14.     //获取文件对象
  15.     file = this.files[0];
  16.     var total = file.size;
  17.     console.info("文件大小：" + file.size);
  18.     var startTime = new Date();
  19.     reader = new FileReader();
  20.     //读取一段成功
  21.     reader.onload = function (e) {
  22.         //处理读取的结果
  23.         var result = reader.result;
  24.         var loaded = e.loaded;
  25.         if (enableRead == false)
  26.             return false;
  27.         //将分段数据上传到服务器
  28.         uploadFile(result, cuLoaded, function () {
  29.             console.info('loaded:' + cuLoaded + '----current:' + loaded);
  30.             //如果没有读完，继续
  31.             cuLoaded += loaded;
  32.             if (cuLoaded < total) {
  33.                 readBlob(cuLoaded);
  34.             } else {
  35.                 console.log('总共用时：' + (new Date().getTime() - startTime.getTime()) / 1000);
  36.                 cuLoaded = total;
  37.             }
  38.             //显示结果进度
  39.             var percent = (cuLoaded / total) * 100;
  40.             document.getElementById('Status').innerText = percent;
  41.             document.getElementById('progressOne').value = percent;
  42.         });
  43.     }
  44.     //开始读取
  45.     readBlob(0);
  46.     //关键代码上传到服务器
  47.     function uploadFile(result, startIndex, onSuccess) {
  48.         var blob = new Blob([result]);
  49.         //提交到服务器
  50.         var fd = new FormData();
  51.         fd.append('file', blob);
  52.         fd.append('filename', file.name);
  53.         fd.append('loaded', startIndex);
  54.         var xhr = new XMLHttpRequest();
  55.         xhr.open('post', '../ashx/upload2.ashx', true);
  56.         xhr.onreadystatechange = function () {
  57.             if (xhr.readyState == 4 && xhr.status == 200) {
  58.                 if (onSuccess)
  59.                     onSuccess();
  60.             } else if (xhr.status == 500) {
  61.                 //console.info('请求出错，' + xhr.responseText);
  62.                 setTimeout(function () {
  63.                     containue();
  64.                 }, 1000);
  65.             }
  66.         }
  67.         //开始发送
  68.         xhr.send(fd);
  69.     }
  70. }
  71. //指定开始位置，分块读取文件
  72. function readBlob(start) {
  73.     //指定开始位置和结束位置读取文件
  74.     var blob = file.slice(start, start + step);
  75.     reader.readAsArrayBuffer(blob);
  76. }
  77. //中止
  78. function stop() {
  79.     //中止读取操作
  80.     console.info('中止，cuLoaded：' + cuLoaded);
  81.     enableRead = false;
  82.     reader.abort();
  83. }
  84. //继续
  85. function containue() {
  86.     console.info('继续，cuLoaded：' + cuLoaded);
  87.     enableRead = true;
  88.     readBlob(cuLoaded);
  89. }

后台代码同上

3.分段读取文件为二进制数组 ，并使用ajax上传到服务器

使用二进制数组传递的方式，效率特别低，最终文件还与原始大小有些偏差

HTML内容同上

JS：


  1. /*
  2.     * 分段读取文件为二进制数组 ，并使用ajax上传到服务器
  3.     * 使用二进制数组传递的方式，效率特别低，最终文件还与原始大小有些偏差
  4.     */
  5. var fileBox = document.getElementById('file');
  6. var reader = new FileReader(); //读取操作对象
  7. var step = 1024 * 1024;  //每次读取文件大小
  8. var cuLoaded = 0; //当前已经读取总数
  9. var file = null; //当前读取的文件对象
  10. var enableRead = true;//标识是否可以读取文件
  11. fileBox.onchange = function () {
  12.     //获取文件对象
  13.     if (file == null) //如果赋值多次会有丢失数据的可能
  14.         file = this.files[0];
  15.     var total = file.size;
  16.     console.info("文件大小：" + file.size);
  17.     var startTime = new Date();
  18.     //读取一段成功
  19.     reader.onload = function (e) {
  20.         //处理读取的结果
  21.         var result = reader.result;
  22.         var loaded = e.loaded;
  23.         if (enableRead == false)
  24.             return false;
  25.         //将分段数据上传到服务器
  26.         uploadFile(result, cuLoaded, function () {
  27.             console.info('loaded:' + cuLoaded + '----current:' + loaded);
  28.             //如果没有读完，继续
  29.             cuLoaded += loaded;
  30.             if (cuLoaded < total) {
  31.                 readBlob(cuLoaded);
  32.             } else {
  33.                 console.log('总共用时：' + (new Date().getTime() - startTime.getTime()) / 1000);
  34.                 cuLoaded = total;
  35.             }
  36.             //显示结果进度
  37.             var percent = (cuLoaded / total) * 100;
  38.             document.getElementById('Status').innerText = percent;
  39.             document.getElementById('progressOne').value = percent;
  40.         });
  41.     }
  42.     //开始读取
  43.     readBlob(0);
  44.     //关键代码上传到服务器
  45.     function uploadFile(result, startIndex, onSuccess) {
  46.         var array = new Int8Array(result);
  47.         console.info(array.byteLength);
  48.         //提交到服务器
  49.         var fd = new FormData();
  50.         fd.append('file', array);
  51.         fd.append('filename', file.name);
  52.         fd.append('loaded', startIndex);
  53.         var xhr = new XMLHttpRequest();
  54.         xhr.open('post', '../ashx/upload3.ashx', true);
  55.         xhr.onreadystatechange = function () {
  56.             if (xhr.readyState == 4 && xhr.status == 200) {
  57.                 // console.info(xhr.responseText);
  58.                 if (onSuccess)
  59.                     onSuccess();
  60.             } else if (xhr.status == 500) {
  61.                 console.info('服务器出错');
  62.                 reader.abort();
  63.             }
  64.         }
  65.         //开始发送
  66.         xhr.send(fd);
  67.     }
  68. }
  69. //指定开始位置，分块读取文件
  70. function readBlob(start) {
  71.     //指定开始位置和结束位置读取文件
  72.     var blob = file.slice(start, start + step);
  73.     reader.readAsArrayBuffer(blob);
  74. }
  75. //中止
  76. function stop() {
  77.     //中止读取操作
  78.     console.info('中止，cuLoaded：' + cuLoaded);
  79.     enableRead = false;
  80.     reader.abort();
  81. }
  82. //继续
  83. function containue() {
  84.     console.info('继续，cuLoaded：' + cuLoaded);
  85.     enableRead = true;
  86.     readBlob(cuLoaded);
  87. }

后台代码：


  1. /// <summary>
  2. /// upload3 的摘要说明
  3. /// </summary>
  4. public class upload3 : IHttpHandler
  5. {
  6.     LogHelper.LogHelper _log = new LogHelper.LogHelper();
  7.     int totalCount = 0;
  8.     public void ProcessRequest(HttpContext context)
  9.     {
  10.         HttpContext _Context = context;
  11.         //接收文件
  12.         HttpRequest req = _Context.Request;
  13.         string data = req.Form["file"];
  14.         //转换方式一
  15.         //int[] intData = data.Split(',').Select(q => Convert.ToInt32(q)).ToArray();
  16.         //byte[] dataArray = intData.ToList().ConvertAll(x=>(byte)x).ToArray();
  17.         //转换方式二
  18.         byte[] dataArray = data.Split(',').Select(q => int.Parse(q)).Select(q => (byte)q).ToArray();
  19.         //获取参数
  20.         string filename = req.Form["filename"];
  21.         //如果是int 类型当文件大的时候会出问题 最大也就是 1.9999999990686774G
  22.         int loaded = Convert.ToInt32(req.Form["loaded"]);
  23.         totalCount += loaded;
  24.         string newname = @"F:\JavaScript_Solution\H5Solition\H5Solition\Content\TempFile\";
  25.         newname += filename;
  26.         try
  27.         {
  28.             // 接收二级制数据并保存
  29.             byte[] dataOne = dataArray;
  30.             FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, 1024);
  31.             try
  32.             {
  33.                 fs.Write(dataOne, 0, dataOne.Length);
  34.             }
  35.             finally
  36.             {
  37.                 fs.Close();
  38.             }
  39.             _log.WriteLine((totalCount + dataOne.Length).ToString());
  40.             WriteStr("分段数据保存成功");
  41.         }
  42.         catch (Exception ex)
  43.         {
  44.             throw ex;
  45.         }
  46.     }
  47.     private void WriteStr(string str)
  48.     {
  49.         HttpContext.Current.Response.Write(str);
  50.     }
  51.     public bool IsReusable
  52.     {
  53.         get
  54.         {
  55.             return false;
  56.         }
  57.     }
  58. }

说明：使用Ajax方式上传，文件不能过大，最好小于三四百兆，因为过多的连续Ajax请求会使后台崩溃，获取InputStream中数据会为空，尤其在Google浏览器测试过程中。

以上就是html5中文件域+FileReader分段读取文件并上传到服务器的案例的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！