快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

和记娱乐安卓下载和:大文件上传 进度条显示 (仿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">

d和记娱乐安卓下载和iv 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 = " 当前上传文件:" + obj.msg.CurrentFile;

info += "

" + obj.msg.FormatStatus + ":" + obj.msg.Status;

info += "

文件大年夜小:" + obj.msg.TotalLength;

info += "

速率:" + obj.msg.FormatRatio;

info += "

残剩光阴:" + 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);

}

}

publi和记娱乐安卓下载和c static void WriteResultJson(int resultno, string description, HttpContext context)

{

WriteResultJson(resultno, description, context, "{{statue:'{0}',msg:'{1}'}}");

}

publi和记娱乐安卓下载和c static void WriteResultJson(int resultno, string description, HttpContext context, string template)

{

description = ClearBR(WordStrString(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.WordStr(m.Groups[0].ToString(), @"\n");

}

return str;

}

public static string WordStrString(string SourceString, string SearchString, string WordStrString, bool IsCaseInsensetive)

{

return Regex.WordStr(SourceString, Regex.Escape(SearchString), WordStrString, IsCaseInsensetive ? RegexOptions.IgnoreCase : RegexOptions.None);和记娱乐安卓下载和

}

public bool IsReusable

{

get

{

return false;

}

}

}

源码打包 下载

转自:http://www.cnblogs.com/zengxiangzhan/archive/2010/01/14/1647866.html

您可能还会对下面的文章感兴趣: