大文件上传进度条显示（仿CSDN资源上传效果） .

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

弹出透明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;   }
}
}

大家有什么问题可以在线多多交流！

附：源码打包下载已经放到20楼了需要的点击下载就行了！

大文件上传进度条显示（仿CSDN资源上传效果） .相关推荐

django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
python requests上传大文件_pythonrequestspost大文件和获取进度条
问题: python requests post 大文件和获取进度条描述: 准备用HTTP 在局域网内上传一些文件,文件一般都在1G左右r = requests.post('****', data ...
大文件上传进度条显示（仿CSDN资源上传效果）
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
php 上传进度条api,php如何实现上传进度条
php实现上传进度条的步骤:首先向服务器端上传一个文件:然后用PHP将这次文件上传的具体信息储存在session当中:接着用Ajax周期性的恳求一个服务器端脚本:最后通过浏览器端的Javascript ...
python ftp上传/下载文件，带进度条显示
文章目录想法最终效果 python代码补充:下载带进度显示想法用python写个ftp上传文件的功能,想要实时看到上传进度,进度条ui部分,使用python的tkinter库实现. 最终效果 ...
VB下载网上文件代码(有进度条显示)
本栏文章均来自于互联网,版权归原作者和各发布网站所有,收集这些文章仅供学习参考之用.任何人都不能将这些文章用于商业或者其他目的. '添加 internet transfer control 6.0 和 ...
android仿微博头像_Android 自定义 View 集锦｜自定义圆形旋转进度条，仿微博头像加载效果...
微博 App 的用户头像有一个圆形旋转进度条的加载效果,看上去效果非常不错,如图所示: 据说 Instagram 也采用了这种效果.最近抽空研究了一下,最后实现的效果是这样: 基本上能模拟出个大概,代 ...
Delphi下载指定网址（URL）的文件，带进度条显示
主要使用的是Delphi自带的TIdhttp控件. 一.界面设置在窗体上放置两个TEdit控件,一个用于输入要下载的文件URL,一个用于输入要保存到本地的文件路径:放置两个TLabel控件,一个显示 ...
js实现文件上传进度条功能
开发中可能会涉及到需要展示文件上传进度条显示,方便用户知道文件的上传状态.其实进度条展示只需要拿到文件已上传的大小,和被上传文件的总大小即可.废话不多说直接上代码!! class fileUpload ...

大文件上传进度条显示（仿CSDN资源上传效果） .

大文件上传进度条显示（仿CSDN资源上传效果） .相关推荐

最新文章

热门文章

大文件上传 进度条显示（仿CSDN资源上传效果） .

大文件上传 进度条显示（仿CSDN资源上传效果） .相关推荐

最新文章

热门文章

大文件上传进度条显示（仿CSDN资源上传效果） .

大文件上传进度条显示（仿CSDN资源上传效果） .相关推荐