PHPで開発したMySqlデータベースへの簡単なファイルアップロード (2)

このセクションでは、フォームとテーブルを使用してファイルをアップロードするためのシンプルなフロントエンドページを組み合わせる方法について説明します

<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>

学び続ける

新しいファイル

<html> <head> <meta charset="utf-8"> <title>文件上传实例</title> <style type="text/css">  </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>

提出するリセットコード

自動運転