BootStrap Progressbar 实现大文件上传的进度条的实例代码
更新时间:2016年7月1日 10:00 点击:2686
1.首先实现大文件上传,如果是几兆或者几十兆的文件就用基本的上传方式就可以了,但是如果是大文件上传的话最好是用分片上传的方式。我这里主要是使用在客户端进行分片读取到服务器段,然后保存,到了服务器段读取完了之后将分片数据进行组合。
2.前端代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>HTML5大文件分片上传示例</title> <script src="Scripts/jquery-1.8.2.js"></script> <link href="bootstrap-progressbar/bootstrap-progressbar-3.3.4.css" rel="stylesheet" /> <script src="bootstrap-progressbar/bootstrap-progressbar.js"></script> <%--<link href="JqueryUI/jquery-ui.css" rel="stylesheet" /> <script src="JqueryUI/jquery-ui.js"></script>--%> <script> function uploadFile() { $("#upload").attr("disabled", "disabled"); var file = $("#file")[0].files[0], //文件对象 fileNum = $("#file")[0].files[0].length, name = file.name, //文件名 size = file.size, //总大小 succeed = 0; var shardSize = 2 * 1024 * 1024, //以2MB为一个分片 shardCount = Math.ceil(size / shardSize); //总片数 $('.progress .progress-bar').attr('data-transitiongoal', 0).progressbar({ display_text: 'fill' }); for (var i = 0; i < shardCount; ++i) { //计算每一片的起始与结束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //构造一个表单,FormData是HTML5新增的 var form = new FormData(); form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分 form.append("name", name); form.append("total", shardCount); //总片数 form.append("index", i + 1); //当前是第几片 //Ajax提交 $.ajax({ url: "Upload.ashx", type: "POST", data: form, async: true, //异步 processData: false, //很重要,告诉jquery不要对form进行处理 contentType: false, //很重要,指定为false才能形成正确的Content-Type success: function () { ++succeed; $("#output").text(succeed + " / " + shardCount); var percent = ((succeed / shardCount).toFixed(2)) * 100; updateProgress(percent); if (succeed == shardCount) { $("#upload").removeAttr("disabled"); } } }); } } function progress(percent, $element) { var progressBarWidth = percent * $element.width() / 100; $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% "); } //$(document).ready(function () { // $('.progress .progress-bar').progressbar({ display_text: 'fill' }); //}); function updateProgress(percentage) { $('.progress .progress-bar').attr('data-transitiongoal', percentage).progressbar({ display_text: 'fill' }); } </script> </head> <body> <input type="file" id="file" /> <button id="upload" onclick="uploadFile();">上传</button> <span id="output" style="font-size: 12px">等待</span> <div class="progress"> <div id="progressBar" class="progress-bar" role="progressbar" data-transitiongoal=""></div> </div> </body> </html>
3. 后台一般处理程序如下:
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; namespace Html5UploadTest { /// <summary> /// Summary description for Upload /// </summary> public class Upload : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; try { //从Request中取参数,注意上传的文件在Requst.Files中 string name = context.Request["name"]; int total = Convert.ToInt32(context.Request["total"]); int index = Convert.ToInt32(context.Request["index"]); var data = context.Request.Files["data"]; //保存一个分片到磁盘上 string dir = context.Request.MapPath("~/temp"); string file = Path.Combine(dir, name + "_" + index); data.SaveAs(file); //如果已经是最后一个分片,组合 //当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上,但要控制好并发防止文件锁冲突 if (index == total) { file = Path.Combine(dir, name); //byte[] bytes = null; using (FileStream fs = new FileStream(file, FileMode.OpenOrCreate)) { for (int i = 1; i <= total; ++i) { string part = Path.Combine(dir, name + "_" + i); //bytes = System.IO.File.ReadAllBytes(part); //fs.Write(bytes, 0, bytes.Length); //bytes = null; System.IO.File.Delete(part); fs.Close(); } } } } catch (Exception) { throw; } //返回是否成功,此处做了简化处理 //return Json(new { Error = 0 }); } public bool IsReusable { get { return false; } } } }
4.当然了后台还需要一些异常处理或者断电续传的工作要做,待续。。。
以上所述是小编给大家介绍的BootStrap Progressbar 实现大文件上传的进度条的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 本篇文章主要介绍了nodejs 终端打印进度条实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
JS树形菜单组件Bootstrap TreeView使用方法详解
这篇文章主要为大家详细介绍了js组件Bootstrap TreeView使用方法,本文一部分针对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-09- 这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法,感兴趣的小伙伴们可以参考一下...2016-01-29
- 这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-02-19
- 这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2017-01-09
- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
这篇文章主要介绍了基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)的相关资料,非常不错,需要的朋友可以参考下...2016-09-01基于Bootstrap的Metronic框架实现页面链接收藏夹功能
本文给大家介绍基于Metronic的Bootstrap开发框架实现页面链接收藏夹功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-09-01- 本文通过实例代码给大家介绍了bootstrap导航条效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧...2017-05-22
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
- 这篇文章主要介绍了Bootstrap Table使用整理(四)之工具栏的相关资料,需要的朋友可以参考下...2017-06-15
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-06-24基于Bootstrap实现Material Design风格表单插件 附源码下载
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载,感兴趣的朋友参考下...2016-04-19