このセクションでは、フォームとテーブルを使用してファイルをアップロードするためのシンプルなフロントエンド ページを組み合わせる方法について説明します
<form> タグの enctype 属性は、フォームを送信するときに使用するコンテンツ タイプを指定します。フォームにファイル コンテンツなどのバイナリ データが必要な場合は、「multipart/form-data」を使用します。
<input> タグの type="file" 属性は、入力をファイルとして処理することを指定します。たとえば、ブラウザでプレビューすると、入力ボックスの横に参照ボタンが表示されます。
ここでは、アップロードされるファイルのサイズを制限するために <input type="hidden" > 隠しフィールドを使用します
<form> <input type="hidden" name="MAX_FILE_SIZE" value="2000000"> </form>
フォームに隠しフィールドを挿入する目的は、ページ上のユーザーに表示されないことです。フォームを処理するプログラムで使用する情報を送信します。閲覧者が送信ボタンをクリックしてフォームを送信すると、隠しフィールドの情報もサーバーに送信されます。
<table> タグは 2 つの属性を使用します cellpacing cellpadding
cell margin (table padding) (cellpadding) - セルとセル スペースを区切るために使用されるセルの外側の距離を表します
Cell spacing (table spacing) (cellspacing) -表の境界線とセルのパディング間の距離を表し、セルのパディング間の距離でもあります
ここでは、cellpacing=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>