多附件上傳組件演示

更新時間：2006年09月07日 00:00:00 作者：

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("\\")         mFileName.innerHTML+="<div   class="tex3rii"   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="kwbrxdw"   id=mFile><input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)"></div>         <div   class="rxqkd30"   id=mFileName></div>         <div   class="vvpx5jo"   id=mstatus>總共有 <b>0</b> 個文件等待上傳</div>       </td>     </tr>     </table> </div> </form> </body>

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

多附件上傳組件演示

相關(guān)文章

webpack中的代理配置詳解
本文主要介紹了webpack中的代理配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
實例淺析js的this
本文通過做幾個簡單的對照實驗，根據(jù)這幾個對照實驗的結(jié)果，幫助大家理解js的this用法。下面就跟小編一起來看看吧
2016-12-12
在光標處插入字符串的實現(xiàn)代碼兼容IE,Firefox
在光標處插入字符串，一般用于網(wǎng)頁編輯器中，這里用的是text，需要的朋友可以參考下。
2010-03-03
js類型檢查實現(xiàn)代碼
檢查對象類型的一種方式是參考所有JavaScript對象所共有的一個稱為constructor的屬性。該屬性是對一個最初用來構(gòu)造此對象的函數(shù)的引用。
2010-10-10
微信小程序?qū)崿F(xiàn)可拖動懸浮圖標的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)可拖動懸浮圖標的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12
JavaScript 監(jiān)聽textarea中按鍵事件
不同的瀏覽器中的事件監(jiān)聽機制是不同的，以onKeyPress事件為例。
2009-10-10
js中Math之random,round,ceil,floor的用法總結(jié)
本篇文章是對js中Math之random,round,ceil,floor的用法進行了總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
深入淺出聊一聊js中的'this'關(guān)鍵字
js中的this關(guān)鍵字平時在開發(fā)中使用時倒是也能正常應(yīng)用,但是對其使用和判斷并不能信手拈來,所以下面這篇文章主要給大家介紹了關(guān)于js中this關(guān)鍵字的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
獲取url中用&隔開的參數(shù)實例(分享)
下面小編就為大家?guī)硪黄@取url中用&隔開的參數(shù)實例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
JavaScript ES 模塊的使用
這篇文章主要介紹了JavaScript ES 模塊的使用，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-11-11