网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 Jquery和BigFileUpload实现大文件上传及进度条显示
内容
    实现方法：用到了高山来客 的bigfileupload组件，用高山来客的方法，弹出一个模式窗口，然后不停刷新获取进度，始终觉得体验感不好，于是想到用jquery来实现无刷新进度显示，因为提交页面后， 不能让其刷新页面，而是要不断地通过ajax获取progress.aspx返回的进度信息,所以用到了jquery.form的ajaxform提交。ajaxform提交后如果执行提交后的事件，比如在数据库里插入记录，还在调试中。
    1、用到了jquery 的 progressbar 、form、MultFile及相关组件
    <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>
    <!--进度条-->
    <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 id="uploadinfo">';
    info += '<p>正在上传: <span id="uploadfilename"></span></p>';
    info += '<p>上传速度: <span id="uploadrate"></span> </p>';
    info += '<p>状态: <span id="uploadtitle"></span></p>';
    info += '<p>预计剩余时间: <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);
    //进度条
    $("#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执行后，能够正常运行，那上传文件后，我如何执行其它操作，研究完了再发
    以上所述是小编给大家介绍的Jquery和BigFileUpload实现大文件上传及进度条显示，希望对大家有所帮助
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/16 22:35:55