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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
益模软件Java笔试题
2012/03/27 面试题
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
酒店个人求职信范文
2014/01/25 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
学习保证书
2015/01/17 职场文书