?
快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

葡萄京娛樂場手機APP:大文件上傳 進度條顯示 (仿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葡萄京娛樂場手機APP({ 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(葡萄京娛樂場手機APP"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="pr葡萄京娛樂場手機APPogressbar" %>

using System;

using System.Web;

using BigFileUpload;//大年夜文件引用命名空間

using Newtonsoft.Json;//工具到JSON的互相轉換

using System.Text.RegularExpressions;//正則

publ葡萄京娛樂場手機APPic 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(WordStrString(description, "'", "|", false));

context.Response.Write(string.Format(tem葡萄京娛樂場手機APPplate, 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

免責聲明:以上內容源自網絡,版權歸原作者所有,如有侵犯您的原創版權請告知,我們將盡快刪除相關內容。

您可能還會對下面的文章感興趣:

快三平台开户