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 相关文章推荐
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 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
yii实现级联下拉菜单的方法
2014/07/31 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python List cmp()知识点总结
2019/02/18 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
优秀教师事迹简介
2014/02/02 职场文书
工程质量承诺书范文
2014/03/27 职场文书
初中学校军训方案
2014/05/09 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2014年教务处工作总结
2014/12/03 职场文书
中学生思想品德评语
2014/12/31 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
大连星海广场导游词
2015/02/10 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL