| 編程（Programming）是編定程序的中文簡稱，就是讓計算機代碼解決某個問題，對某個計算體系規(guī)定一定的運算方式，使計算體系按照該計算方式運行，并最終得到相應結果的過程。為了使計算機能夠理解（understand）人的意圖，人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機，使得計算機能夠根據人的指令一步一步去工作，完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 JS實現多附件上傳效果 【實例描述】 在網絡硬盤或郵箱附件功能中，常常需要上傳大量的文件，為了提高上傳速度，可允許用戶同時選擇多個文件，然后一次上傳。本例就介紹實現此功能的方法。 【實例代碼】 <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;
//初始化數組為0，之后隨著變化
var fileCount=1;
//總共輸入了多少個有值的File控件 ,初始化為1
var tempRow=0;
//動態(tài)表格的臨時行
var maxRows=0;
//動態(tài)表格的臨時列
var num = 1;
//file 控件數組下標,從1開始,默認顯示一個
var fileCount=1;
//整個操作中,總共用了多少個 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;
//分割文件,以'\'號
var fileTextValue;
//取出最后的文件名
fileText = document.all("uploadFile[" + n + "].file").value;
//獲取文件名稱
ary = fileText.split("\\");
fileTextValue = ary[ary.length-1];
document.all("a" + n).style.display = "none";
//將前一個 P 的子元素設為不可見
//在前面一個 File 控件隱藏后,接著再在原來的位置上插入一個
document.getElementById('MyFile').
insertAdjacentHTML("beforeEnd",str);
tempRow=fileTable.rows.length-1;
//fileTable 就是那個動態(tài)的 table 的 ID 了
maxRows=tempRow;
tempRow=tempRow+1;
var Rows=fileTable.rows;
//Rows 數組
var newRow=fileTable.insertRow(fileTable.rows.length);
//插入新的一行
var Cells=newRow.cells;
//Cells 數組
for (i=0;i<3;i++)
//每行的2列數據,一列用來顯示文件名,一列顯示"刪除"操作
{
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'> </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);
//刪除當前行
}else
fileTable.deleteRow(fileTable.rows.length-1);
document.all("MyFile").removeChild(document.all("a" + fileCount));
//從元素P上刪除子結點 a 。（跟刪除表格行同步）
fileCount--;
//總數 -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>
【運行效果】  【難點剖析】 本例的難點是如何動態(tài)添加行以顯示上傳的文件，其中還使用了file控件來上傳文件。動態(tài)添加行使用“insertRow”方法，添加列使用“insertCell”方法。 【源碼下載】 為了JS代碼的準確性，請點擊：多附件上傳效果 進行本實例源碼下載
使用編程語言寫的程序，由于每條指令都對應計算機一個特定的基本動作，所以程序占用內存少、執(zhí)行效率高。
| 
