jQuery+asp无刷新显实时进度条上传
upload.html
该上传程序使用了JQuery，下载地址：
远程下载：http://jsframework.cn/software/jquery/jquery-1.2.6.js
本站打包下载：
jquery-1.2.6.rar （28.45 KB）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>upload</title>
<style type="text/css">
form{font-size: 12px;}
.file{
position: relative;
display: block;
width: 90px;
height: 30px;
background: url(fu_btn.gif) no-repeat scroll left top;
outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/
}
.hide{
position: absolute;
left: -120px;
top: 3px;
height: 30px;
filter: alpha(opacity=0);
opacity: 0;
outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/
cursor: pointer;
}
#show{color: #F5C66C; position: absolute; line-height: 25px; font-weight: bold; font-size: 14px;}
</style>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("form").submit(function(e){
if(!$("input:file", this).val()){
alert("请选择文件");
return false;
};
var width = "300";
$("<iframe name='upload'/>").appendTo(document.body).css("display", "none");
$("#container").css({width: width+"px", padding: "1px", border: "1px solid #ccc"});
$("#process").css({background: "#7E9BE5", height: "25px", width: 0,overflow: "hidden"});
$("#show").show();
var iTimer = setInterval(function(){
$.getJSON("ProcessBar.asp", function(data){
if(data.ReadBytes){
var process = (data.ReadBytes*100/data.TotalBytes).toFixed(0);
$("#process").css({"width": data.ReadBytes*width/data.TotalBytes + "px"});
$("#show").css("left", data.ReadBytes*width/data.TotalBytes + 12 + "px");
$("#show").html(data.TotalBytes?(process +"%"):0);
}
if(data.ReadBytes && data.ReadBytes == data.TotalBytes){
$("#show").html("").hide()
$.get("ProcessBar.asp", {ok: "ok"});
clearInterval(iTimer);
return;
}
});
}, 10);
});
});
//-->
</script>
</head>
<body>
<form target="upload" action="upload.asp" method="post" enctype="multipart/form-data">
<a class="file" href="#"><input name="file" type="file" class="hide" /></a>
<div id="container"><div id="process"><div id="show"></div></div></div>
<input type="submit" value="开始上传" />
</form>
</body>
</html>
upload.asp
<%@Language="Javascript" %>
<%
var Upload, undefined;
if(Request.ServerVariables("Request_Method").Item == "POST")
{
Upload = GetObject("script:" + Server.MapPath("FyUpload.sct"));
Upload.ReadForm(5120, "upload");
Upload.Filter = "asfman";
Upload.SaveFile(".");
Upload.Dispose();
Upload = undefined;
}
%>
<%
var Upload, undefined;
if(Request.ServerVariables("Request_Method").Item == "POST")
{
Upload = GetObject("script:" + Server.MapPath("FyUpload.sct"));
Upload.ReadForm(5120, "upload");
Upload.Filter = "asfman";
Upload.SaveFile(".");
Upload.Dispose();
Upload = undefined;
}
%>
ProcessBar.asp
<%@language="Javascript" EnableSessionState=false%>
<%
Response.CacheControl = "no-cache";
var ProcID = "upload";
%>
{TotalBytes: <%=Application(ProcID+ "_TotalBytes")?Application(ProcID+ "_TotalBytes"):0%>, ReadBytes: <%=Application(ProcID+ "_ReadBytes")?Application(ProcID+ "_ReadBytes"):0%>}
<%
if(Request.QueryString("ok").Item == "ok" && Application.Contents(ProcID+ "_TotalBytes")&&(Application.Contents(ProcID+ "_TotalBytes")==Application.Contents(ProcID+ "_ReadBytes"))){
Application.Lock();
Application.Contents.Remove(ProcID+ "_TotalBytes");
Application.Contents.Remove(ProcID+ "_ReadBytes");
Application.Unlock();
}
%>
<%
Response.CacheControl = "no-cache";
var ProcID = "upload";
%>
{TotalBytes: <%=Application(ProcID+ "_TotalBytes")?Application(ProcID+ "_TotalBytes"):0%>, ReadBytes: <%=Application(ProcID+ "_ReadBytes")?Application(ProcID+ "_ReadBytes"):0%>}
<%
if(Request.QueryString("ok").Item == "ok" && Application.Contents(ProcID+ "_TotalBytes")&&(Application.Contents(ProcID+ "_TotalBytes")==Application.Contents(ProcID+ "_ReadBytes"))){
Application.Lock();
Application.Contents.Remove(ProcID+ "_TotalBytes");
Application.Contents.Remove(ProcID+ "_ReadBytes");
Application.Unlock();
}
%>
上传组件为rimifon强大的js组件：
http://www.zope.org/Members/Rimifon/FyUpload.sct（右键下载）
FyUpload.sct介绍：
http://www.aspxhome.com/download/asp/20081/292230.htm
演示地址：http://jsframework.cn/software/jquery/upload.html
站长工具
相关文章
请稍等，评论加载中...