CQ-CSER

计算机爱好者

大文件上传 进度条显示

Posted on | 一月 15, 2010 | No Comments

浏览-选择文件-点击 “上传 ”后，效果如下：

弹出透明UI遮罩层 并显示上传这个过程 我这里设置太透明了 效果不是很立体

曾祥展

文件结构如图：

曾祥展

 

说明：用到“高山来客”的大文件上传组件 http://www.cnblogs.com/bashan/archive/2008/05/23/1206095.html

以及Newtonsoft.Json.dll Json字符串反序列化为对象 http://james.newtonking.com/projects/json-net.aspx

jquery.blockUI.js 弹出透明遮罩层 http://malsup.com/jquery/block/

jquery.form.js   表单验证Ajax提交 

参照了“蚂蚁飞了”的文章 多谢多谢 http://blog.csdn.net/jetsteven

 

 

HTML：

<form id="uploadForm" runat="server" enctype="multipart/form-data">
  <div id="uploadfield"  style="width:600px; height:500px">
   <input id="File1" type="file" runat="server" />
   <asp:Button ID="Button1" runat="server"  Text="上传" onclick="Button1_Click" />
    <p>文件上传进度条</p>
    <p>文件上传进度条</p>
    <p>文件上传进度条</p>
    <p>文件上传进度条</p>
    <p>文件上传进度条</p>
    <p>文件上传进度条</p>
     <p>文件上传进度条</p>
   </div>
  <div id="ui"  style="display:none"  >
   <div id="output" > </div>
   <div id="progressbar"class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="width:296px; height:20px;"></div>
   <input id="btn_cancel" type="button" value="取消上传" />
  </div>
</form>
  
js:


 


var inte;
$(function() {
$('#uploadForm').submit(function() {
    return false;
});

$('#uploadForm').ajaxForm({ //这里调用jquery.form.js表单注册方法
    beforeSubmit: function(a, f, o) {//提交前的处理
        o.dataType = "json";
        $('#uploadfield').block({ message: $('#ui'), css: { width: '300px', border: '#b9dcfe 1px solid',padding: '0.5em 0.2em'  }
        });
        inte = self.setInterval("getprogress()", 500);
    }
});

$('#btn_cancel').click(function() {
    var uploadid = $("#UploadID").val();
    $.ajax({
        type: "POST",
        dataType: "json",
        async: false, //ajax的请求时同步 只有一个线程
        url: "upload_ajax.ashx",
        data: "UploadID=" + uploadid + "&cancel=true",
        success: function(obj) {
            $("#output").html(obj.msg);
            inte = self.clearInterval(inte);
            $('#uploadfield').unblock(); 

             }
    });
});
});

function getprogress() {
var uploadid = $("#UploadID").val()
$.ajax({
    type: "POST",
    dataType: "json",
    async: false,
    url: "upload_ajax.ashx",
    data: "UploadID=" + uploadid,
    success: function(obj) {
    var p = obj.msg.Readedlength / obj.msg.TotalLength * 100;
    var info = "<FONT color=Green> 当前上传文件:</FONT>" + obj.msg.CurrentFile;
    info += "<br><FONT color=Green>" + obj.msg.FormatStatus + ":</FONT>" + obj.msg.Status;
    info += "<br><FONT color=Green>文件大小:</FONT>" + obj.msg.TotalLength;
    info += "<br><FONT color=Green>速度:</FONT>" + obj.msg.FormatRatio;
    info += "<br><FONT color=Green>剩余时间:</FONT>" + obj.msg.LeftTime;

    $("#output").html(info);
    $("#progressbar").progressbar({ value: 0 }); //初始化
    $("#progressbar").progressbar("option", "value", p);
    $("#progressbar div").html(p.toFixed(2) + "%");
    $("#progressbar div").addClass("percentText");
    if (obj.msg.Status == 4) {
        inte = self.clearInterval(inte);
        $('#uploadfield').unblock();
    }

    }
});
}




 


交互过程代码：


 




<%@ WebHandler Language="C#" Class="progressbar" %>

using System;
using System.Web;

using BigFileUpload;//大文件引用命名空间
using Newtonsoft.Json;//对象到JSON的相互转换
using System.Text.RegularExpressions;//正则

public class progressbar : IHttpHandler {

private string template = "{{statue:'{0}',msg:{1}}}";
public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    try
    {
    string guid = context.Request["UploadID"];
    string cancel =context.Request["cancel"];
    UploadContext c = UploadContextFactory.GetUploadContext(guid);
    if (!string.IsNullOrEmpty(cancel))
    {
        c.Abort=true;

        throw new Exception("用户取消");
    }
    string json = Newtonsoft.Json.JsonConvert.SerializeObject(c);   

    WriteResultJson(1, json, context,template);

    }catch (Exception err)
    {
        WriteResultJson(0, err.Message, context);
    }
}

public static void WriteResultJson(int resultno, string description, HttpContext context)
{
    WriteResultJson(resultno, description, context, "{{statue:'{0}',msg:'{1}'}}");
}

public static void WriteResultJson(int resultno, string description, HttpContext context, string template)
{
    description = ClearBR(ReplaceString(description, "'", "|", false));
    context.Response.Write(string.Format(template, resultno, description));
}

public static string ClearBR(string str)
{
    Regex r = null;
    Match m = null;
    r = new Regex(@"(\r|\n)", RegexOptions.IgnoreCase);
    for (m = r.Match(str); m.Success; m = m.NextMatch())
    {
        str = str.Replace(m.Groups[0].ToString(), @"\n");
    }
    return str;
}

public static string ReplaceString(string SourceString, string SearchString, string ReplaceString, bool IsCaseInsensetive)
{
    return Regex.Replace(SourceString, Regex.Escape(SearchString), ReplaceString, IsCaseInsensetive ? RegexOptions.IgnoreCase : RegexOptions.None);
}

public bool IsReusable
{
    get
    {
        return false;
    }
}
}
源码打包 下载 1/15/2010 8：30 AM


原文：http://www.cnblogs.com/zengxiangzhan/archive/2010/01/14/1647866.html




相关文章:
  1. ASP.NET的sitemap和RSS
    2. 

  2. JS进行GET和POST请求
    3. 

  3. 建立HttpHandler并在web应用程序中注册
    4. 

  4. DES加密解密函数 收藏 c#
    5. 

  5. C#获取CPU的利用率代码
    6. 


	
	
Category: WEB, c#
Tags:  >  >  > 

	
	
	
	
评论|Comments

	





			

	 



留言|Leave a Reply











































	
	
	

	






	




  • Archives
    
		

    • 



  • SUNSHINE
    
		

    • 

	

	

	
    About
    
		
    本博客采用创作共用版权协议,要求署名、非商业用途和保持一致. 转载本博客内容也遵循“署名-非商业用途-保持一致”的创作共用协议.

    

    


    



	
    订阅
    

	

	
    Search
    
   		
    
		
    

	

	
    Admin