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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
JS传参及动态修改页面布局
2017/04/13 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
UML设计模式笔试题
2014/06/07 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
升职自荐信
2013/11/28 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
初中作文评语
2014/12/25 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
解析原生JS getComputedStyle
2021/05/25 Javascript
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android