`
mzhj
  • 浏览: 228120 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用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 style="display:none" 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执行后,能够正常运行,那上传文件后,我如何执行其它操作,研究完了再发

分享到:
评论

相关推荐

    基于net的超市管理系统源代码(完整前后端+sqlserver+说明文档+LW).zip

    功能说明: 环境说明: 开发软件:VS 2017 (版本2017以上即可,不能低于2017) 数据库:SqlServer2008r2(数据库版本无限制,都可以导入) 开发模式:mvc。。。

    LABVIEW程序实例-公式节点.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    大米商城开源版damishop(适合外贸)

    大米外贸商城系统 简称damishop 完全开源版,只需做一种语言一键开启全球133中语言自动翻译功能,价格实现自动汇率转换,集成微信支付宝 paypal以及国外主流支付方式,自带文章博客系统。 软件架构 基于MVC+语言包模式,增加控制台,API导入产品方便对接其他系统(带json示例数据)。 使用要求 PHP7.4+ MYSQL5.6+ REDIS(可选) 安装方法 composer install 打开安装向导安装 http://您的域名/install 特色 1、缓存层增加时间与批量like删除 2、API产品导入方便对接其他系统 3、增加控制台命令行,命令行生成语言翻译包 4、后台一键开启自动翻译模式,支持全球133中语言,由于google代理翻译需要收费,这个功能需要付费。 5、可选购物车与ajax修改购物车产品 6、一键结算checkout 7、增加网站前台自定义路由 方便seo 更新日志 v3.9.7 集成鱼码支付接口,方便个人站长即使收款到账使用 v3.9.3 更新内容 1:增加ueditor与旧编辑器切换 2:增加可视化布局插

    LABVIEW程序实例-通过全局变量接收数据.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    LABVIEW程序实例-日历控件.zip

    labview程序代码参考学习使用,希望对你有所帮助。

    毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频.zip

    毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频

Global site tag (gtag.js) - Google Analytics