多附件上传组件演示

2020-05-11 我要评论

1.可以动态添加或删除上传文件的对象
2.自动处理文件路径获取文件名.
3.自动计算待上传文件数

<head> 
<meta http-equiv="Content-Language" content="zh-cn"> 
<script> 
 function mCreateFile(obj){ 
  var eF 
  var mName 
  mFileName.innerHTML="" 
    if (obj.id=="File") { 
    for (i=0;i<mFile.children.length-1;i++) 
    { 
      if (mFile.children[i].value=="") { 
              mFile.removeChild(mFile.children[i]) 
      } 
      else 
      { 
        mName=mFile.children[i].value.split("\\") 
        mFileName.innerHTML+="<div>"+mName[mName.length-1]+"</div>" 
      } 
    } 
    mstatus.innerHTML="总共有 <b>"+(mFile.children.length-1)+"</b> 个文件等待上传" 
  } 
  
  if (obj.id=="File_New") { 
  eF=document.createElement('<input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)">') 
  mFile.appendChild(eF) 
  obj.id="File" 
  } 
 } 
</script> 
<style> 
table{ 
    FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3); 
} 
input{ 
border:1px soild #000000; 
font-family:Verdana,Arial,宋体; 
font-size:12px; 
padding:2px; 
} 
#mTD{ 
  LINE-HEIGHT: 24px; 
} 
#mFile{ 
width:203px; 
float:left; 
| 
#mFileName{ 
float:right; 
width:182px; 
} 
#NameDetail{ 
overflow:hidden; 
width:176px; 
color:#000000; 
font-family:Verdana,Arial,宋体; 
font-size:12px; 
cursor:default; 
height:22px; 
} 
#mstatus{ 
font-size:12px; 
color:#ff0000; 
} 
</style> 
</head> 
<body> 
<form name=frm method=post> 
<div> 
<table border="1" width="420" style="border-collapse: collapse" bordercolor="#0066cc" cellpadding="4" bgcolor="#D0F0FF"> 
    <tr> 
        <td bgcolor="#3399FF" height="26" align="center"><font color="#FFFFFF" size="3"><b>添加附件</b></font></td> 
    </tr> 
    <tr> 
      <td id=mTD> 
        <div><input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)"></div> 
        <div></div> 
        <div>总共有 <b>0</b> 个文件等待上传</div> 
      </td> 
    </tr> 
    </table> 
</div> 
</form> 
</body>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

一个很Cool的JS菜单效果

猜您喜欢

05-11一个很简单的办法实现TD的加亮效果.
05-11Javascript 不能释放内存.
05-11一些有关检查数据的JS代码
05-11b/s开发常用javaScript技术
05-11加入收藏夹代码（兼容 gecko）
05-11Mozilla中显示textarea中选择的文字
05-11showModelessDialog()使用详解
05-11Javascript 事件捕获的备忘(setCapture,captureEvents)
05-11图片完美缩放
05-11prototype class详解
05-11javascript的函数
05-11IE中jscript/javascript的条件编译
05-11prototype 1.5 & scriptaculous 1.6.1 学习笔记
05-11彪哥1.1(智能表格)提供下载
05-11js输入中文效果
05-11js-穷举法 (y0h)
05-11快速判断某个值是否在select中的方法
05-11日期函数扩展类Ver0.1.1

多附件上传组件演示

相关文章

猜您喜欢

今日热门