BootStrap Progressbar 实现大文件上传的进度条的实例代码
1.首先实现大文件上传，如果是几兆或者几十兆的文件就用基本的上传方式就可以了，但是如果是大文件上传的话最好是用分片上传的方式。我这里主要是使用在客户端进行分片读取到服务器段，然后保存，到了服务器段读取完了之后将分片数据进行组合。
2.前端代码如下：
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="UploadTest2.aspx.cs"Inherits="Html5UploadTest.UploadTest2"%>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<title>HTML5大文件分片上传示例</title>
<scriptsrc="Scripts/jquery-1.8.2.js"></script>
<linkhref="bootstrap-progressbar/bootstrap-progressbar-3.3.4.css"rel="stylesheet"/>
<scriptsrc="bootstrap-progressbar/bootstrap-progressbar.js"></script>
<%--<linkhref="JqueryUI/jquery-ui.css"rel="stylesheet"/>
<scriptsrc="JqueryUI/jquery-ui.js"></script>--%>
<script>
functionuploadFile(){
$("#upload").attr("disabled","disabled");
varfile=$("#file")[0].files[0],//文件对象
fileNum=$("#file")[0].files[0].length,
name=file.name,//文件名
size=file.size,//总大小
succeed=0;
varshardSize=2*1024*1024,//以2MB为一个分片
shardCount=Math.ceil(size/shardSize);//总片数
$('.progress.progress-bar').attr('data-transitiongoal',0).progressbar({display_text:'fill'});
for(vari=0;i<shardCount;++i){
//计算每一片的起始与结束位置
varstart=i*shardSize,
end=Math.min(size,start+shardSize);
//构造一个表单，FormData是HTML5新增的
varform=newFormData();
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);
varpercent=((succeed/shardCount).toFixed(2))*100;
updateProgress(percent);
if(succeed==shardCount){
$("#upload").removeAttr("disabled");
}
}
});
}
}
functionprogress(percent,$element){
varprogressBarWidth=percent*$element.width()/100;
$element.find('div').animate({width:progressBarWidth},500).html(percent+"%");
}
//$(document).ready(function(){
//$('.progress.progress-bar').progressbar({display_text:'fill'});
//});
functionupdateProgress(percentage){
$('.progress.progress-bar').attr('data-transitiongoal',percentage).progressbar({display_text:'fill'});
}
</script>
</head>
<body>
<inputtype="file"id="file"/>
<buttonid="upload"onclick="uploadFile();">上传</button>
<spanid="output"style="font-size:12px">等待</span>
<divclass="progress">
<divid="progressBar"class="progress-bar"role="progressbar"data-transitiongoal=""></div>
</div>
</body>
</html>
3.后台一般处理程序如下：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.IO;
usingSystem.Linq;
usingSystem.Web;
namespaceHtml5UploadTest
{
///<summary>
///SummarydescriptionforUpload
///</summary>
publicclassUpload:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
try
{
//从Request中取参数，注意上传的文件在Requst.Files中
stringname=context.Request["name"];
inttotal=Convert.ToInt32(context.Request["total"]);
intindex=Convert.ToInt32(context.Request["index"]);
vardata=context.Request.Files["data"];
//保存一个分片到磁盘上
stringdir=context.Request.MapPath("~/temp");
stringfile=Path.Combine(dir,name+"_"+index);
data.SaveAs(file);
//如果已经是最后一个分片，组合
//当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上，但要控制好并发防止文件锁冲突
if(index==total)
{
file=Path.Combine(dir,name);
//byte[]bytes=null;
using(FileStreamfs=newFileStream(file,FileMode.OpenOrCreate))
{
for(inti=1;i<=total;++i)
{
stringpart=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;
}
//返回是否成功，此处做了简化处理
//returnJson(new{Error=0});
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}
4.当然了后台还需要一些异常处理或者断电续传的工作要做，待续。。。
以上所述是小编给大家介绍的BootStrapProgressbar实现大文件上传的进度条的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！