This section explains how to combine a simple front-end page for file upload through forms and tables
The enctype attribute of the<form> tag specifies which content type to use when submitting the form. Use "multipart/form-data" when your form requires binary data, such as file content.
<input> The type="file" attribute of the tag specifies that the input should be processed as a file. For example, when previewing in a browser, you'll see a browse button next to the input box.
Here we use <input type="hidden" >hidden fields to limit the size of uploaded files
<form> <input type="hidden" name="MAX_FILE_SIZE" value="2000000"> </form>
Hidden fields are invisible to users on the page and in the form The purpose of inserting hidden fields is to collect or send information so that it can be used by the program that processes the form. When the viewer clicks the send button to send the form, the hidden field information is also sent to the server.
<table>The label uses two attributes cellspacing cellpadding
Cell margin (table padding) (cellpadding) -- represents a distance outside the cell, using Used to separate cells and cell space
Cell spacing (table spacing) (cellspacing) - represents the distance between the table border and the cell padding, and is also the distance between the cell padding
Here Set to cellspacing=0, cellpadding=0
The complete page code is shown below:
<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>