AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

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

51自学网 http://www.51zixue.net

原帖及讨论:http://bbs.bccn.net/thread-170145-1-1.html

*/ --------------------------------------------------------------------------------------
*/ 出自: 编程中国  点击下载该文件

预览页面
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>

 

 

 
上一篇:JavaScript运算符详解  下一篇:JavaScript常用对象的方法和属性