BootStrap Progressbar 实现大文件上传的进度条的实例代码


Posted in Javascript onJune 27, 2016

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 实现大文件上传的进度条的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
vue实现五子棋游戏
May 28 Javascript
JavaScript事件详细讲解
Jun 27 #Javascript
JS原型链怎么理解
Jun 27 #Javascript
js选择器全面解析
Jun 27 #Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 #Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 #Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 #Javascript
全面了解javascript三元运算符
Jun 27 #Javascript
You might like
php网页后退不再出现过期
2007/03/08 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
react的hooks的用法详解
2020/10/12 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python实现简单井字棋游戏
2020/03/04 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
教师实习自我鉴定
2013/12/13 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python