이 섹션에서는 양식과 테이블을 통한 파일 업로드를 위한 간단한 프런트 엔드 페이지를 결합하는 방법을 설명합니다.
<form> 태그의 enctype 속성은 양식을 제출할 때 사용할 콘텐츠 유형을 지정합니다. 양식에 파일 콘텐츠와 같은 바이너리 데이터가 필요한 경우 "multipart/form-data"를 사용하세요.
<input> 태그의 type="file" 속성은 입력이 파일로 처리되어야 함을 지정합니다. 예를 들어 브라우저에서 미리 볼 때 입력 상자 옆에 찾아보기 버튼이 표시됩니다.
여기서 <input type="hidden" > 숨겨진 필드를 사용하여 업로드된 파일의 크기를 제한합니다.
<form> <input type="hidden" name="MAX_FILE_SIZE" value="2000000"> </form>
숨겨진 필드는 페이지에서 사용자에게 표시되지 않습니다. 양식을 처리하는 프로그램에서 사용할 정보를 보냅니다. 뷰어가 전송 버튼을 클릭하여 양식을 전송하면 숨겨진 필드 정보도 서버로 전송됩니다.
<table> 태그는 두 가지 속성을 사용합니다. 테이블 테두리와 셀 안쪽 여백 사이의 거리를 나타내며 셀 안쪽 여백 사이의 거리이기도 합니다.
<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>