本節講解透過表單和表格來組合一個檔案上傳簡單前端頁面
<form> 標籤的 enctype 屬性規定了在提交表單時要使用哪種內容類型。表單需要二進位資料時，例如檔案內容，請使用 "multipart/form-data"。
<input> 標籤的 type="file" 屬性規定了應該把輸入當作檔案來處理。舉例來說，當在瀏覽器中預覽時，會看到輸入框旁邊有一個瀏覽按鈕。
這裡我們使用了<input type="hidden" >隱藏網域來限制上傳檔案的大小
<form> <input type="hidden" name="MAX_FILE_SIZE" value="2000000"> </form>
隱藏網域在頁面中對於使用者是不可見的，在表單中插入隱藏域的目的在於收集或傳送訊息，以利被處理表單的程式所使用。瀏覽者點擊傳送按鈕發送表單的時候，隱藏網域的資訊也被一起傳送到伺服器。
<table>標籤這裡使用了兩個屬性cellspacing cellpadding
單元格邊距(表格填充)(cellpadding) -- 代表單元格外面的一個距離,用於隔開單元格與單元格空間
單元格間距(表格間距)(cellspacing) -- 代表表格邊框與單元格補白的距離,也是單元格補白之間的距離
在這裡設定為cellspacing=0，cellpadding=0
下方顯示完整頁面程式碼：
<html>
<head>
<meta charset="utf-8">
<title>文件上传实例</title>
<style type="text/css">
<!--
body
{
font-size: 20px;
}
input
{
background-color: #66CCFF;
border: 1px inset #CCCCCC;
}
form
{
margin-top:5%;
}
-->
</style>
</head>
<body>
<form method="post" action="?action=save" enctype="multipart/form-data">
<table border=0 cellspacing=0 cellpadding=0 align=center width="100%">
<tr>
<td width=55 height=20 align="center"></td>
<td height="16">
<table>
<tr>
<td>标题：</td>
<td><input name="title" type="text" id="title"></td>
</tr>
<tr>
<td>文件： </td>
<td><label>
<input name="file" type="file" value="浏览" >
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
</label></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="上 传" name="upload"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>