脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap progressbar上传进度条

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

 更新时间：2016年06月27日 15:46:37   作者：千里烟波226  
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下

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

您可能感兴趣的文章:

相关文章

  • JS实现线性表的链式表示方法示例【经典数据结构】

    JS实现线性表的链式表示方法示例【经典数据结构】

    这篇文章主要介绍了JS实现线性表的链式表示方法,简单讲解了线性表链式表示的原理并结合实例形式分析了js针对线性表链式表示的创建、插入、删除等节点操作技巧,需要的朋友可以参考下
    2017-04-04
  • 微信小程序wx.request的简单封装

    微信小程序wx.request的简单封装

    这篇文章主要介绍了微信小程序wx.request的简单封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • JavaScript实现Date()日期格式化的3种常用方法

    JavaScript实现Date()日期格式化的3种常用方法

    Date()日期对象是一个构造函数,必须使用new来调用创建我们的日期对象,下面这篇文章主要给大家介绍了关于JavaScript实现Date()日期格式化的3种常用方法,需要的朋友可以参考下
    2024-05-05
  • Javascript中常见的逻辑题和解决方法

    Javascript中常见的逻辑题和解决方法

    今天遇到了一些题，比较有意思和轻巧，而且加强运用一下了js原生语法，现在小编总结好后分享给大家，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-09-09
  • JavaScript正则表达式实例详解

    JavaScript正则表达式实例详解

    在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。
    2016-10-10
  • js实现音乐播放器

    js实现音乐播放器

    这篇文章主要为大家详细介绍了js实现音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript代码轻松实现网页内容禁止复制(代码简单)

    JavaScript代码轻松实现网页内容禁止复制(代码简单)

    有些时候我们写的内容不想被别人复制，在代码中怎么实现的呢？下面小编给大家介绍javascript代码轻松实现网页内容禁止复制，感兴趣的童鞋一起看看吧
    2015-10-10
  • js判断游览器类型及版本号的代码

    js判断游览器类型及版本号的代码

    今天分析一下, 终于找到原因. 旧版本的js文件写的浏览器判断有异常, 所以导致插入点一直在头部. 今天修复之
    2014-05-05
  • 详解js中==与===的区别

    详解js中==与===的区别

    本文主要介绍了js中==与===的相同点与不同点。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 如何实现JS函数的重载

    如何实现JS函数的重载

    如何实现JS函数的重载...
    2006-09-09

最新评论