Jquery和BigFileUpload實(shí)現(xiàn)大文件上傳及進(jìn)度條顯示

    實(shí)現(xiàn)方法：用到了高山來(lái)客 的bigfileupload組件，用高山來(lái)客的方法，彈出一個(gè)模式窗口，然后不停刷新獲取進(jìn)度，始終覺(jué)得體驗(yàn)感不好，于是想到用jquery來(lái)實(shí)現(xiàn)無(wú)刷新進(jìn)度顯示，因?yàn)樘峤豁?yè)面后， 不能讓其刷新頁(yè)面，而是要不斷地通過(guò)ajax獲取progress.aspx返回的進(jìn)度信息,所以用到了jquery.form的ajaxform提交。ajaxform提交后如果執(zhí)行提交后的事件，比如在數(shù)據(jù)庫(kù)里插入記錄，還在調(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>
    <!--對(duì)話框-->
    <!--我的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 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)度條顯示，希望對(duì)大家有所幫助