好了，下面就是编写javascript脚本了，我引用了jquery这个框架，另外还用了ui框架。
核心代码是ajax-progress-upload.js文件，另外还有一个获取guid的文件。
$(document).ready(function () { var _guid_url = "ProgressHandler/GenerateGuid.ashx"; var _progress_url = "ProgressHandler/Handler.ashx"; var _abort_url = "ProgressHandler/Abort.ashx"; var _target = "#guid"; var _guid = ""; var _cancel = false; var _timer; LJQ.setGuid(_target, _guid_url); $("#upload_panel").draggable({ handle: "#upload_title" }); $("#upload_choose span").hover(function () { $(this).css({ "color": "#f6af3a", "border": "1px solid #e78f08" }); }, function () { $(this).css({ "color": "#1c94cd", "border": "1px solid #ddd" }); }); $("#upload_cancel").click(function () { $.ajax({ url: _abort_url, data: { guid: _guid, abort: true }, dataType: "xml", type: "post", success: function () { $("#upload_panel").fadeOut('fast'); $("#back_panel").fadeOut(1000); window.clearInterval(_timer); } }); }); $("#upload_submit").click(function () { $("#upload_panel").fadeOut('fast'); $("#back_panel").fadeOut("1000"); }); $("form").submit(function () { _guid = $(_target).val(); if ($("input[name='upload_file']").val() == "") { alert("未指定上传文件！"); return false; } $("#upload_progress").css("width", "0%"); $("#finished_percent").html("准备上传..."); $("#upload_speed").html(""); $("#upload_fileName").html(""); $("#upload_fileSize").html(""); $("#upload_costTime").html(""); var _option = { url: _progress_url, data: { guid: _guid }, dataType: "xml", type: "post", beforeSend: function () { $("#back_panel").fadeTo('fast', '0.5'); $("#upload_panel").fadeIn('1000'); }, success: function (response) { if ($(response).find("root abort").text() == "true") { $("#upload_panel").fadeOut('fast'); $("#back_panel").fadeOut(1000); window.clearInterval(_timer); } else if ($(response).find("root none").text() == "no file") { } else { var _percent = ($(response).find("root percent").text() * 100); var _speed = $(response).find("root speed").text(); var _fileSize = $(response).find("root fileSize").text(); var _upload_costTime = $(response).find("root costTime").text(); if (parseInt(_speed) < 1024) { _speed = LJQ.toFix(_speed) + "Kb"; } else { _speed = LJQ.toFix(_speed / 1024) + "Mb"; } if (parseInt(_fileSize) / 1024 < 1024) { _fileSize = LJQ.toFix(_fileSize / 1024) + "Kb"; } else if (parseInt(_fileSize) / 1024 / 1024 < 1024) { _fileSize = LJQ.toFix(_fileSize / 1024 / 1024) + "Mb"; } else { _fileSize = LJQ.toFix(_fileSize / 1024 / 1024 / 1024) + "Gb"; } if (_upload_costTime < 1000) { _upload_costTime = _upload_costTime + "毫秒"; } else if (_upload_costTime / 1000 < 60) { _upload_costTime = parseInt(_upload_costTime / 1000) + "秒" + _upload_costTime % 1000 + "毫秒"; } else { _upload_costTime = parseInt(_upload_costTime / 1000 / 60) + "分" + parseInt((_upload_costTime % 60000) / 1000) + "秒" + _upload_costTime % 1000 + "毫秒"; } $("#upload_progress").css("width", parseInt(_percent) + "%"); $("#finished_percent").html("完成百分比：" + LJQ.toFix(_percent) + "%"); $("#upload_speed").html("上传速度：" + _speed + "/sec"); $("#upload_fileName").html("文件名称：" + $(response).find("root fileName").text()); $("#upload_fileSize").html("文件大小：" + _fileSize); $("#upload_costTime").html("上传耗时：" + _upload_costTime); if (_percent >= 100) { window.clearInterval(_timer); $("#finished_percent").html("<span>文件上传完成</span>"); } if (_cancel) { window.clearInterval(_timer); } } }, error: function () { } }; _timer = window.setInterval(function () { $.ajax(_option); }, 1000); }); });
以上为代码的主要部分。asp.net单文件带进度条上传，不属于任务控件，也不是flash类型的上传，完全是asp.net、js、css实现上传。源码为开发测试版，需要使用的亲需要注意修改配置文件。
项目源码下载请点击这里：(jb51.net).rar
您可能感兴趣的文章: