JS實(shí)現(xiàn)多附件上傳效果

2012/11/10 19:34:40作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

在網(wǎng)絡(luò)硬盤或郵箱附件功能中，常常需要上傳大量的文件，為了提高上傳速度，可允許用戶同時(shí)選擇多個(gè)文件，然后一次上傳。本例就介紹實(shí)現(xiàn)此功能的方法。

【實(shí)例代碼】

<html>
<head>
<style>
a.addfile {
background-image:url(http://p.mail.163.com/js31style/
lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
input.addfile {
}
input.addfile {
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0); 
position:absolute;
top:5px;
width:1px;
z-index: -1;
}
</style>
<script language="javascript" >
    var n=0;                 
//初始化數(shù)組為0，之后隨著變化
    var fileCount=1;         
//總共輸入了多少個(gè)有值的File控件 ,初始化為1 
    var tempRow=0;           
//動(dòng)態(tài)表格的臨時(shí)行
    var maxRows=0;           
//動(dòng)態(tài)表格的臨時(shí)列
    var num = 1;             
//file 控件數(shù)組下標(biāo),從1開始,默認(rèn)顯示一個(gè)
    var fileCount=1;         
//整個(gè)操作中,總共用了多少個(gè) File 控件
    //添加文件的主要方法
    function addFile()
    { 
        var str = '<a href=#? class="addfile" 
id="a' + num +'"><input type="file" size="50" 
class="addfile" onchange="addFile()" 
name="uploadFile[' + num + '].file" ' + '/>';
//待插入的文件控件
        var fileText;       
//得到文件控件的值
        var ary;            
//分割文件,以'\'號(hào)
        var fileTextValue;  
//取出最后的文件名 
fileText = document.all("uploadFile[" + n + "].file").value; 
 //獲取文件名稱
        ary = fileText.split("\\");                  
        fileTextValue = ary[ary.length-1];
        document.all("a" + n).style.display = "none";
//將前一個(gè) P 的子元素設(shè)為不可見
           
//在前面一個(gè) File 控件隱藏后,接著再在原來(lái)的位置上插入一個(gè)
        document.getElementById('MyFile').
insertAdjacentHTML("beforeEnd",str);
        tempRow=fileTable.rows.length-1;    
//fileTable   就是那個(gè)動(dòng)態(tài)的   table 的 ID 了
         maxRows=tempRow; 
         tempRow=tempRow+1; 
        var Rows=fileTable.rows;            
//Rows 數(shù)組 
        var newRow=fileTable.insertRow(fileTable.rows.length); 
//插入新的一行 
        var Cells=newRow.cells;
//Cells 數(shù)組 
        for (i=0;i<3;i++) 
//每行的2列數(shù)據(jù),一列用來(lái)顯示文件名,一列顯示"刪除"操作 
        { 

var newCell=Rows(newRow.rowIndex).insertCell(Cells.length); 
          newCell.align="center"; 
          switch (i) 
          { 
case 0 : newCell.innerHTML="<td width='40%' 
align='left'><span id='"+n+"'></span></td>";
                   break; 
case 1 : newCell.innerHTML="<td width='20%' align='left'>
<a href='javascript:delTableFileRow(\"" +tempRow+ "\",\"" + n + "\")'>
刪除</a></TD>";
                   break; 
case 2 : newCell.innerHTML="<td width='40%' align='left'>&nbsp;</TD>"; 
                   break; 
          } 
        } 
        maxRows+=1;
document.getElementById(n).insertAdjacentText("beforeBegin",fileTextValue);
        n++;
        num++;
        fileCount++;
    }
  function delTableFileRow(rowNum,fileCount)
  {   
    if (fileTable.rows.length >rowNum){ 
      fileTable.deleteRow(rowNum);                 
 //刪除當(dāng)前行
    }else
fileTable.deleteRow(fileTable.rows.length-1);
document.all("MyFile").removeChild(document.all("a" + fileCount)); 
//從元素P上刪除子結(jié)點(diǎn) a 。（跟刪除表格行同步）
    fileCount--;    　　　　　　　　　　　　　　 　
//總數(shù) -1
  }   
</script>
</head>
<body>
<form id="form1" >
<table width="830" height="385" border="0" align="center"
cellpadding="0" cellspacing="0" id='myTable'>
  <tr> 
<td height="27" align="center" 
bgcolor="#E2F0FE" class="time">附件</td>
<td height="79" align="center" colSpan="3" 
bgcolor="#E2F0FE" class="time">
<div align="left">
    <P id="MyFile">
<a href=#? class="addfile" id="a0">
<input type="file" class="addfile" onchange="addFile()" 
size="1" name="uploadFile[0].file"  value=""/>
</a>
</P>
<table width="100%" height="100%" border="0">
<tr><td width="40%" align="left"></td><td width="60%">
</td></tr>
<tr>
<td colspan="2">
<table width="100%" border="0" id="fileTable" align="left">
</table>
</td>  
</table>
</div>
</td>
</tr>
</table>
</body></html>

【運(yùn)行效果】

多附件上傳效果運(yùn)行效果