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

来源：阅读：1627 次日期：2016-07-12 14:49:43

温馨提示：小编为您整理了“BootStrap Progressbar 实现大文件上传的进度条的实例代码”,方便广大网友查阅！

这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下

1.首先实现大文件上传，如果是几兆或者几十兆的文件就用基本的上传方式就可以了，但是如果是大文件上传的话最好是用分片上传的方式。我这里主要是使用在客户端进行分片读取到服务器段，然后保存，到了服务器段读取完了之后将分片数据进行组合。

2.前端代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %>

<head>

<title>HTML5大文件分片上传示例</title>

<%--<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />

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>

</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 实现大文件上传的进度条的实例代码，希望对大家有所帮助

上一篇：Jquery和BigFileUpload实现大文件上传及进度条显示

下一篇：JavaScript事件详细讲解

手机网站地址：BootStrap Progressbar 实现大文件上传的进度条的实例代码

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！