HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML】accept属性でサーバーが受け入れるファイル形式を指定する方法

HTMLでは、accept属性を使用することで、フォームからアップロード可能なファイルの種類（MIMEタイプ）を指定できます。この属性を設定すると、ユーザーがファイル選択ダイアログで選べるファイルが絞られ、サーバーに不要なデータが送信されるのを防ぐことができます。

なお、accept属性は<input type="file">と組み合わせてのみ使用できます。テキストボックスなど他のinputタイプには適用できないため、注意してください。

accept属性の使用例

以下のコードは、画像ファイルのみをアップロード対象として許可する例です。image/*と指定することで、JPEGやPNG、GIFなどすべての画像形式が選択可能になります。

<!DOCTYPE html>
<html>
   <head>
      <title>File Upload Box</title>
   </head>
   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
</html>

accept属性の主な指定例

  • image/*：すべての画像ファイル
  • video/*：すべての動画ファイル
  • audio/*：すべての音声ファイル
  • .pdf：PDFファイル
  • .doc,.docx：Word文書

複数のファイル形式を許可したい場合は、値をカンマ区切りで指定します。また、accept属性による制限はあくまでブラウザ側のフィルタリングであるため、セキュリティを確保するには、サーバー側でも必ずファイル形式の検証を行うようにしましょう。

  1. HTMLでスペースを挿入する方法｜ ・ ・ ・ の違いと使い分け

    HTMLでは、テキストに空白（スペース）を入れたい場面がよくあります。しかし、キーボードのスペースキーを何度押しても、HTMLは連続する半角スペースを自動的に1つにまとめて表示してしまうため、意図した通りの余白を作るのは簡単ではありません。複数のスペースやタブのような幅を持つ空白が必要なときに活躍するのが、HTMLエンティティ（文字実体参照）です。この記事では、さまざまなサイズのスペースを実現できるHTMLエンティティの種類と、それぞれの使い方を詳しく解説します。 HTMLで使える4種類のスペース HTML要素内で主に使用されるスペースには、以下の4種類があります。 &thins

  2. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動