多附件上傳組件演示

2019-11-21 02:31:25

字體：大中小

供稿：網(wǎng)友

1.可以動態(tài)添加或刪除上傳文件的對象
2.自動處理文件路徑獲取文件名.
3.自動計算待上傳文件數(shù)

<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("http://")         mFileName.innerHTML+="<div   class="aw86csk"   id=NameDetail title='"+mName[mName.length-1]+"'>"+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 align="center"> <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   class="0sco4s8"   id=mFile><input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)"></div>         <div   class="e6acu6w"   id=mFileName></div>         <div   class="iaoyo4i"   id=mstatus>總共有 <b>0</b> 個文件等待上傳</div>       </td>     </tr>     </table> </div> </form> </body>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：一個很Cool的JS菜單效果

下一篇：一個很簡單的辦法實現(xiàn)TD的加亮效果.