實(shí)現(xiàn)方法：用到了高山來客 的bigfileupload組件，用高山來客的方法，彈出一個(gè)模式窗口，然后不停刷新獲取進(jìn)度，始終覺得體驗(yàn)感不好，于是想到用jquery來實(shí)現(xiàn)無刷新進(jìn)度顯示，因?yàn)樘峤豁撁婧螅?不能讓其刷新頁面，而是要不斷地通過ajax獲取progress.aspx返回的進(jìn)度信息,所以用到了jquery.form的ajaxform提交。ajaxform提交后如果執(zhí)行提交后的事件，比如在數(shù)據(jù)庫里插入記錄，還在調(diào)試中。

1、用到了jquery 的 progressbar 、form、MultFile及相關(guān)組件

<script src="../../common/js/jquery-1.2.6.pack.js" type="text/javascript"></script>

<script src="../../common/jqControl/packed/ui.core.packed.js" type="text/javascript"></script>

<!--FORM-->

<script src="../../common/jqControl/ajax/jquery.form.js" type="text/javascript"></script>

<!--上傳文件-->

<script src="../../common/jqControl/upLoad/jquery.MultiFile.pack.js" type="text/javascript"></script>

<!--進(jìn)度條-->

<script src="../../common/jqControl/packed/ui.progressbar.packed.js" type="text/javascript"></script>

<!--對話框-->

<!--我的JS -->

<link href="../../common/Css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css" />

<script src="../gadget/JS/uploadfile.js" type="text/javascript">

2.uploadfile.js代碼如下：

$(function()

{

var info = '<div style="display:none" id="uploadinfo">';

info += '<p>正在上傳: <span id="uploadfilename"></span></p>';

info += '<p>上傳速度: <span id="uploadrate"></span> </p>';

info += '<p>狀態(tài): <span id="uploadtitle"></span></p>';

info += '<p>預(yù)計(jì)剩余時(shí)間: <span id="uploadlefttime"></span></p>';

info += '<p>上傳文件大小: <span id="uploadtotal"></span></p>';

info += '<p>已上傳大小: <span id="uploadcurrent"></span></p>';

info += '<p><div id="uploadprogressbar"></div></p>';

info += '</div><div id="dialogsucc" > ';

$("body").append(info);

//進(jìn)度條

$("#uploadprogressbar").progressbar();

//上傳

$('#fileupload').MultiFile();

$('#btshow').click(function()

{

alert($("body").html());

});

//提交

$('#btnsubmit').click(function()

{

$("#uploadForm").ajaxSubmit(

{

dataType: 'text',

beforeSubmit: function(a,f,o)

{

startProgress();

},

async:false,

success: function(data)

{

//$("#dialogsucc").text(data);

//stopProgress();

if(data.succ==1)

{

/* $("#dialogsucc").show();

$("#dialogsucc").dialog(

{

modal: true,

overlay:

{

opacity: 0.5,

background: "black"

}

}); */

}

},

error:function(err)

{

alert(err);

}

});

});

});

function getProgress(){

$.ajax({

type: "post",

dataType:"json",

url: "uploadProgress.aspx",

data: "UploadID=" + $("#UploadID").val(),

success: function(data){

$("#uploadprogressbar").progressbar("progress", data.percent);

$("#uploadfilename").html(data.filename);

$("#uploadrate").html(data.rate);

$("#uploadtitle").html(data.info);

$("#uploadlefttime").html(data.lefttime);

$("#uploadtotal").html(data.total);

$("#uploadcurrent").html(data.current);

if(data.succ==-1){

alert(data.errmsg);

}

if (data.succ==0){

setTimeout("getProgress()", 1000);

}

if (data.succ==1){

return;

}

},

error:function(msg)

{

alert(msg);

}

});

}

function startProgress(){

$("#uploadinfo").show();

setTimeout("getProgress()", 500);

}

function stopProgress()

{

$("#uploadinfo").hide();

}

3:progress.aspx代碼如下:

protected void Page_Load(object sender, EventArgs e)

{

try

{

string s = "{";

UploadContext upload = UploadContextFactory.GetUploadContext(Request["UploadID"]);

//初始化

if (upload.Status == uploadStatus.Initializing)

{

s += responeJSON(upload, "0", "");

}

if (upload.Status == uploadStatus.Uploading)

{

s += responeJSON(upload, "0", "");

}

if (upload.Status == uploadStatus.Complete)

{

s += responeJSON(upload, "1", "");

}

if (upload.Status == uploadStatus.HasError)

{

s += responeJSON(upload, "-1", "");

}

s += "}";

Response.Write(s);

}

catch (Exception err)

{

//throw err;

Response.Write("{'info':'" + err.Message.Replace("'", "") + "','succ':-1}");

}

}

private string responeJSON(UploadContext upload, string succ,string errmsg)

{

string s = "";

s += "'info':'" + upload.FormatStatus + "'" ;

s += ",'percent':'" + Convert.ToInt32((upload.Readedlength * 100.0 / upload.TotalLength)).ToString() + "'";

s += ",'current':'" + (upload.Readedlength/1024).ToString() + "KB'";

s += ",'total':'" + (upload.TotalLength/1024).ToString() + "KB'";

s += ",'rate':'" + upload.FormatRatio + "'";

s += ",'filename':'" + upload.CurrentFile + "'";

s += ",'cancel_upload':" + 0 ;

s += ",'lefttime':'" + upload.LeftTime + "'";

s += ",'succ':" + succ;

s += ",'errmsg':'" + errmsg +"'";

return s;

}

4.ajaxForm執(zhí)行后，能夠正常運(yùn)行，那上傳文件后，我如何執(zhí)行其它操作，研究完了再發(fā)

以上所述是小編給大家介紹的Jquery和BigFileUpload實(shí)現(xiàn)大文件上傳及進(jìn)度條顯示，希望對大家有所幫助