用javascript仿163邮箱网盘多文件上传用户控件

*/ --------------------------------------------------------------------------------------
*/ 出自： 编程中国 http://www.bc-cn.net
*/ 作者： islet E-mail：islet71@163.com QQ：4238114
*/ 时间： 2007-9-15 编程论坛首发
*/ 声明： 尊重作者劳动，转载请保留本段文字
*/ --------------------------------------------------------------------------------------

JavaScript CSS ASP.NET SQLServer

附件数据表：
CREATE TABLE T_XLTGL_FJ] (
[ID] [int] IDENTITY (1, 1) NOT NULL ,
[FJ_NAME] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[FJ_TYPE] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[FJ_SIZE] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[FJ_DATA] [image] NULL ,
[DA_ID] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[DA_TABLE] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[FJ_DATE] [datetime] NULL
)

多附件外挂保存在数据库中

点击下载该文件

预览页面
test.html：

程序代码:

<style type="text/css"> .swtjwj { COLOR: #999999 }
.dgtjwj { COLOR: #990000 }
td {font-size: 12px;}
.input1 { font-size: 13px; color: #000000; background-color: #FFFFFF; border: 1px solid #000000; width: 100%;}
#filep { white-space: pre; height: 34px; width: 103px; overflow: hidden;}
A:link { COLOR: #000000; TEXT-DECORATION: none}
A:visited { COLOR: #000000; TEXT-DECORATION: none}
A:hover { COLOR: #ff0000; TEXT-DECORATION: none}
.file1{ height:34px; font-size:19px; margin-left:-55px; border:none; POSITION: absolute; left: 13px; top: 3px;}
#nofile div { font-size: 12px; white-space: pre; height: 20px; overflow: hidden; }
#nofile img { font-size: 12px; white-space: pre; overflow: hidden; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: -3px; margin-left: 0px; }
#dtitle { font-size: 14px; font-weight: bold; color: #FFFFFF; background-image: url(images/liulan_bg.gif); background-repeat: repeat-x; letter-spacing: 4px; }
.input2 { font-size: 13px; color: #000000; background-color: #FFF4DD; border: 1px solid #C48900; width: 100%; }
</style>
<script language="Javascript">
function FormatFileName(s){
var Max=68,l,r,t,o=s;
t=s.split(".");
t=t[t.length-1];
if(s.length>Max){
r=s.split("//");
r=Len(r[r.length-1]) 1;
l=Max-r-5;
s=Left(s,l) "....." Right(s,r);
}
t='<img border=0 src="' filePic(t) '" width=16 height=16> ';
return '<a href="' o '" target="_blank">' t s '</a>';
}
function FormatFileNameNolink(s){
var Max=68,l,r,t,o=s;
t=s.split(".");
t=t[t.length-1];
if(s.length>Max){
r=s.split("//");
r=Len(r[r.length-1]) 1;
l=Max-r-5;
s=Left(s,l) "....." Right(s,r);
}
t='<img border=0 src="' filePic(t) '" width=16 height=16> ';
return t s;
}
function filePic(t){
filepath="images/";
switch (t.toLowerCase()){
case "doc" : t="msword.gif";break;
case "xls" : t="msexcel.gif";break;
case "jpg" : t="image.gif";break;
case "gif" : t="image.gif";break;
case "bmp" : t="image.gif";break;
case "png" : t="image.gif";break;
case "rar" : t="archive.gif";break;
case "zip" : t="archive.gif";break;
case "htm" : t="htm.gif";break;
case "html" : t="htm.gif";break;
case "js" : t="htm.gif";break;
case "asp" : t="htm.gif";break;
case "aspx" : t="htm.gif";break;
case "XML" : t="htm.gif";break;
default : t="unknown.gif";
}
return filepath t;
}
function Left(str,n){
if(str.length <= n/2) return str;
else
{
var TStr;
var l=0,t=0,c=0,i=0;
l = str.length;
t = l;
TStr="";
t=0;
for(i=0;i<l;i )
{
c=str.substr(i,1).charCodeAt();
if(c < 0) c = 65536;
if(c > 255) t = 2;
else t = 1;
if(t > n) {
break;
}
TStr = str.substr(i,1);
}
return TStr;
}
}
function Right(str,n){
if(str.length <= n/2) return str;
else
{
var TStr;
var l=0,t=0,c=0,i=0;
l = str.length;
t = l;
TStr="";
t=0;
for(i=l-1;i>=0;i--)
{
c=str.substr(i,1).charCodeAt();
if(c < 0) c = 65536;
if(c > 255) t = 2;
else t = 1;
if(t > n) {
break;
}
TStr = str.substr(i,1) TStr;
}
return TStr;
}
}
function Len(str,n){
var l=0,t=0,c=0,i=0;
l = str.length;
t = l;
t=0;
for(i=0;i<l;i ){
c=str.substr(i,1).charCodeAt();
if(c < 0) c = 65536;
if(c > 255) t = 2;
else t = 1;
}
return t;
}

var maxId=1,fnums=0;
function newUpFile(o){
maxId ;
var p=o.parentElement;
id=maxId;
p.insertAdjacentHTML("beforeEnd",fileText(id));
if(document.getElementById("dels").innerHTML.length<5) document.getElementById("files").innerHTML= "";
document.getElementById("files").innerHTML = "<div id='fn" id "'>" FormatFileName(o.value) "</div>";
document.getElementById("dels").innerHTML = delText(id);
fnums ;
var arr=o.value.split(".");
var arr = arr[arr.length-1].toUpperCase();
// var type="<%=TYPE%>";
var type="所有类型";
if(type!="所有类型"){
type="," type.toUpperCase() ","
if(type.indexOf("," arr ",")<0){
alert(arr "文件类型不符！");
delUpFile(id);
}
}
else if(fnums>1){
var no=p.childNodes;
for(var i=0;i<no.length;i )
if(no[i]!=o){
if(no[i].value==o.value){
alert("不能重复提交文件！");
delUpFile(id);
}
}
}
}
function fileText(id){
return '<input name="t7' id '" class="file1" onChange="newUpFile(this)" type="file" id="t7' id '" size="1">'
}
function delText(id){
return '<div id="d7' id '"><a href="Javascript:void(0)" onclick="delUpFile(' id ')"><span class="STYLE4">×</span> 移除</a></div>';
}
function delUpFile(id){
document.getElementById("filep").removeChild(document.getElementById("t7" id));
document.getElementById("files").removeChild(document.getElementById("fn" id));
document.getElementById("dels").removeChild(document.getElementById("d7" id));
fnums--;
if(fnums<1){
maxId=1;
if(document.getElementById("files").innerHTML.length<10) document.getElementById("files").innerHTML ='<span class="swtjwj">尚未添加文件...</span>';
}
}
function delFj(id){
if(confirm("您确定要删除此文件吗？/n/n此文件是已上传附件，建议删除前做好备份。")){
getXML(window.location.pathname "?act=del&id=" id,"Nothing");
document.getElementById("files").removeChild(document.getElementById("yfj" id));
document.getElementById("dels").removeChild(document.getElementById("dfj" id));
}
}
function killErrors() {
return true;
}
//window.onerror = killErrors;
function getXML(url,currentPos){
var ajax=new AJAXRequest;
ajax.get(
url,
function(obj) {
if(obj.responseText){
var obj_str=obj.responseText;
var obj1=document.getElementById(currentPos);
if(currentPos=="Nothing"){
eval(obj_str);
}
else obj1.innerHTML=obj_str;
}
}
);
}
function postXML(f,currentPos){
var ajax=new AJAXRequest;
ajax.postf(
document.getElementById(f),
function(obj) {
if(obj){
if(currentPos=="Nothing")
eval(obj.responseText);
else
document.getElementById(currentPos).innerHTML=obj.responseText;
}
else alert(document.getElementById(f).action);
}
);
ajax=null;
}
function SetCookie(sName, sValue){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() Days*24*60*60*1000);
document.cookie=sName "=" escape(sValue) "; expires=" exp.toGMTString();
}
function GetCookie(sName)
{
var aCookie = document.cookie.split("; ");
var k=0;
for (var i=0; i < aCookie.length; i )
{

var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
{return unescape(aCrumb[1]); k=1;}
}
if(k!=1) return "";
}
function DelCookie(Name)
{
var exp = new Date();
exp.setTime(exp.getTime()-1);
document.cookie=Name "=" escape("") "; expires=" exp.toGMTString();
}
//ajax
function AJAXRequest() {
var XMLPool=new Array,AJAX=this,ac=arguments.length,av=arguments;
var xmlVersion = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
var nullfun=function(){return;};
var av=ac>0?typeof(av[0])=="object"?av[0]:{}:{};
var encode=av.charset?av.charset.toUpperCase()=="UTF-8"?encodeURIComponent:escape:encodeURIComponent;
this.url=av.url?av.url:"";
this.oncomplete=av.oncomplete?av.oncomplete:nullfun;
this.content=av.content?av.content:"";
this.method=av.method?av.method:"POST";
this.async=av.async?async:true;
this.onexception=av.onexception?av.exception:nullfun;
this.ontimeout=av.ontimeout?av.ontimeout:nullfun;
this.timeout=av.timeout?av.timeout:3600000;
if(!getObj()) return false;
function getObj() {
var i,tmpObj;
for(i=0;i<xmlPool.length;i ) if(xmlPool[i].readyState==0||xmlPool[i].readyState==4) return XMLPool[i];
try { tmpObj=new XMLHttpRequest; }
catch(e) {
for(i=0;i<XMLVersion.length;i ) {
try { tmpObj=new ActiveXObject(XMLVersion[i]); } catch(e2) { continue; }
break;
}
}
if(!tmpObj) return false;
else { xmlPool[xmlPool.length]=tmpObj; return xmlPool[XMLPool.length-1]; }
}
function $(id) { return document.getElementById(id); }
function varobj(val) {
if(typeof(val)=="string") {
if(val=$(val)) return val;
else return false;
}
else return val;
}
this.setcharset=function(cs) {
if(cs.toUpperCase()=="UTF-8") encode=encodeURIComponent;
else encode=escape;
}
this.send=function() {
var purl,pc,pcbf,pm,pa,ct,ctf=false,XMLObj=getObj(),ac=arguments.length,av=arguments;
if(!XMLObj) return false;
purl=ac>0?av[0]:this.url;
pc=ac>1?av[1]:this.content;
pcbf=ac>2?av[2]:this.oncomplete;
pm=ac>3?av[3].toUpperCase():this.method;
pa=ac>4?av[4]:this.async;
if(!pm||!purl||!pa) return false;
var ev={url:purl, content:pc, method:pm};
purl =(purl.indexOf("?")>-1?"&":"?") Math.random();
XMLObj.open(pm,purl,pa);
if(pm=="POST") XMLObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ct=setTimeout(function(){ctf=true;XMLObj.abort();},AJAX.timeout);
XMLObj.onreadystatechange=function() {
if(ctf) AJAX.ontimeout(ev);
else if(XMLObj.readyState==4) {
ev.status=XMLObj.status;
try{ clearTimeout(ct); } catch(e) {};
try{
if(xmlObj.status==200) pcbf(XMLObj);
else AJAX.onexception(ev);
}
catch(e) { AJAX.onexception(ev); }
}
}
if(pm=="POST") xmlObj.send(pc); else XMLObj.send("");
}
this.get=function() {
var purl,pcbf,ac=arguments.length,av=arguments;
purl=ac>0?av[0]:this.url;
pcbf=ac>1?av[1]:this.oncomplete;
if(!purl&&!pcbf) return false;
this.send(purl,"",pcbf,"GET",true);
}
this.update=function() {
var purl,puo,pinv,pcnt,rinv,ucb,ac=arguments.length,av=arguments;
puo=ac>0?av[0]:null;
purl=ac>1?av[1]:this.url;
pinv=ac>2?(isNaN(parseInt(av[2]))?1000:parseInt(av[2])):null;
pcnt=ac>3?(isNaN(parseInt(av[3]))?null:parseInt(av[3])):null;
if(puo=varobj(puo)) {
ucb=function(obj) {
var nn=puo.nodeName.toUpperCase();
if(nn=="INPUT"||nn=="TEXTAREA") puo.value=obj.responseText;
else try{puo.innerHTML=obj.responseText;} catch(e){};
}
}
else ucb=nullfun;
if(pinv) {
AJAX.send(purl,"",ucb,"GET",true);
if(pcnt&&--pcnt) {
var cf=function(cc) {
AJAX.send(purl,"",ucb,"GET",true);
if(cc<1) return; else cc--;
setTimeout(function(){cf(cc);},pinv);
}
setTimeout(function(){cf(--pcnt);},pinv);
}
else return(setInterval(function(){AJAX.send(purl,"",ucb,"GET",true);},pinv));
}
else this.send(purl,"",ucb,"GET",true);
}
this.post=function() {
var purl,pcbf,pc,ac=arguments.length,av=arguments;
purl=ac>0?av[0]:this.url;
pc=ac>1?av[1]:"";
pcbf=ac>2?av[2]:this.oncomplete;
if(!purl&&!pcbf) return false;
this.send(purl,pc,pcbf,"POST",true);
}
this.postf=function() {
var fo,pcbf,purl,pc,pm,ac=arguments.length,av=arguments;
if(!(fo=ac>0?av[0]:null)) return false;
if(fo=varobj(fo)) {
if(fo.nodeName!="FORM") return false;
}
else return false;
pcbf=ac>1?av[1]:this.oncomplete;
purl=ac>2?av[2]:(fo.action?fo.action:this.url);
pm=ac>3?av[3]:(fo.method?fo.method.toUpperCase():"POST");
if(!pcbf&&!purl) return false;
pc=this.formToStr(fo);
if(!pc) return false;
if(pm) {
if(pm=="POST") this.send(purl,pc,pcbf,"POST",true);
else if(purl.indexOf("?")>0) this.send(purl "&" pc,"",pcbf,"GET",true);
else this.send(purl "?" pc,"",pcbf,"GET",true);
}
else this.send(purl,pc,pcbf,"POST",true);
}
this.formToStr=function(fc) {
var i,qs="",and="",ev="";
for(i=0;i<fc.length;i ) {
e=fc[i];
if (e.name!='') {
if (e.type=='select-one'&&e.selectedIndex>-1) ev=e.options[e.selectedIndex].value;
else if (e.type=='checkbox' || e.type=='radio') {
if (e.checked==false) continue;
ev=e.value;
}
else ev=e.value;
ev=encode(ev);
qs =and e.name '=' ev;
and="&";
}
}
return qs;
}
}
</script>
<%if(View=="false"){%>
<table cellSpacing="0" cellPadding="0" width="100%" bgColor="#ffffff" border="0">
<tr>
<td vAlign="top" width="105" height="38"><IMG id="upfile" style="POSITION: absolute" height="34" src="images/fjadd_1.gif"
width="102">
<div id="filep" onmouseover="document.getElementById('upfile').src='images/fjadd_2.gif'"
style="FILTER: Alpha(Opacity=0); CURSOR: hand; POSITION: absolute" onmouseout="document.getElementById('upfile').src='images/fjadd_1.gif'"><input class="file1" id="t71" type="file" onchange="newUpFile(this)" size="1" name="t71">
</div>
</td>
<td><span class="dgtjwj">如需同时上传多个文件，请继续点击“添加文件”按钮<br>
(支持文件格式：<%=TYPE%>
)</span></td>
</tr>
</table>
<%}%>
<table cellSpacing="1" cellPadding="3" width="100%" bgColor="#f2f7fb" border="0">
<tr>
<td bgColor="#f9fbfd" height="20">文件路径</td>
<td align="center" width="60" bgColor="#f9fbfd">操作
</td>
</tr>
<tr id="nofile">
<td id="files" bgColor="#ffffff" height="30"><%=txt%></td>
<td id="dels" align="center" bgColor="#ffffff"><%=del%></td>
</tr>
</table>