<input type="file">タグでファイルアップロードボタンを作成する

    • このページをはてなブックマークに追加

    公開日:2016年08月24日 最終更新日:2019年11月22日

    <input>タグの「type属性」に"file"を指定するとWEBサーバーにアップロードするファイルを選択するボタンを作成することができます。ファイルの種類を指定することのできる「accept属性」の使い方も合わせて解説します。

    1. アップロードボタンの作り方

    1.1. <input>タグの基本書式

    HTML文書の入力フォームにはテキストボックスやラジオボタン、チェックボックスといった項目を作成することができます。入力フォームの内容はサーバーへ送信されますが、名前や住所などのテキスト情報だけでなく、画像ファイルや音声ファイルなどを送信するフォームを作成することができます。<input>タグを使いますが基本の書式は以下の通りとなります。

    ●input001.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <title>HTML入門-ファイルのアップロード</title>
    </head>
    <body>
    <form action="#">
    	<p>アップロードするファイルを選択して下さい。</p>
    	<p><input type="file" name="s_file"></p>
    </form>
    </body>
    </html>
    

    inputタグのtype属性に"file"を設定するとファイルアップロードのボタンが表示されます。

    ●ブラウザーの表示

    input1

    ブラウザーによってボタンの表示は異なります。IE(Internet Explorer)のブラウザー表示はボタンの文言が「参照...」になり、左横にファイルのパスを入力できるテキストボックスが表示されます。

    input2

    「ファイルを選択(参照)」ボタンをクリックすると、自身のコンピューター上(ローカル)のファイルを選択できるようになります。

    input4

    ▲ページトップへ戻る

    1.2. multiple属性で複数ファイルを選択する

    「multiple属性」を使うとファイルの複数選択が可能になります。

    ●input001.html

    <p><input type="file" name="s_file" multiple></p>
    

    ●ファイルを開く

    input5

    Ctrlを押しながらファイルの選択をします。

    ▲ページトップへ戻る

    2. accept属性でファイルの種類を指定する

    2.1. テキスト(text)ファイルの選択

    「accept属性」で選択するファイルの種類を限定することが可能です。属性値を「"text/plain"」とすれば、ボタンをクリックした時にテキストファイルのみ選択可能な状態になります。

    input7

    選択するフォルダー内のファイルが、テキストファイル(inputSample.txt~)、画像ファイル(Sample-image.GIF)、音楽ファイル(Sample-music.mp3)、動画ファイル(Sample-Video.wmv)だったとします。以下のコードを記述すると拡張子が「"txt"」と名前のつくファイルのみ選択可能な状態になります。

    ●input001.html

    <p><input type="file" name="s_file" accept="text/plain" multiple></p>
    

    ●ファイルを開く(text)

    input6

    ▲ページトップへ戻る

    2.2. 画像(image)ファイルの選択

    属性値を「"image/*"」とすると、ボタンをクリックした時に画像ファイルのみ選択可能な状態になります。選択できる画像の拡張子は以下の通りです。

    .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw

    ●input001.html

    <p><input type="file" name="s_file" accept="image/*" multiple></p>
    

    ●ファイルを開く(image)

    input8

    アスタリスクマーク「*」は画像ファイル全てという意味ですが、特定の画像ファイルを指定することもできます。

    ●input001.html

    <p><input type="file" name="s_file" accept="image/png, image/jpeg, image/gif" multiple></p>
    

    カンマで区切って、pngファイルとjpegファイル及びgifファイルのみ選択できるように指定しています。

    ▲ページトップへ戻る

    2.3.音声(audio)ファイルの選択

    属性値を「"audio/*"」とすると、ボタンをクリックした時に音声ファイルのみ選択可能な状態になります。選択できる音声の拡張子は以下の通りです。

    .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma

    ●input001.html

    <p><input type="file" name="s_file" accept="audio/*" multiple></p>
    

    ●ファイルを開く(audio)

    input9

    ▲ページトップへ戻る

    2.4. 動画(video)ファイルの選択

    属性値を「"video/*"」とすると、ボタンをクリックした時に動画ファイルのみ選択可能な状態になります。選択できる動画の拡張子は以下の通りです。

    .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid

    ●input001.html

    <p><input type="file" name="s_file" accept="video/*" multiple></p>
    

    ●ファイルを開く(video)

    input10

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【HTML】Webデザイナー|デザイン提案などのアートディレクション業務

    年収 :300万円〜700万円

    受託の開発・制作から自社開発まで幅広い案件を持ちます。 制作の視点から「こうしたら効果が上がるの...

    株式会社クオリアシステムズ

    正社員

    【Javascript】WEBデザイナー|広告/カタログの企画・デザイン・制作

    年収 :250万円〜400万円

    広告、カタログ、Web等の企画・デザイン・制作をご担当いただきます

    ワイズマトリックス株式会社

    正社員

    【Javascript】WEBデザイナー|自社Webサイトの企画・制作・運営

    年収 :400万円〜500万円

    自社Webサイトの企画・制作・運営などをご担当いただきます。 <具体的な業務> ・自社コーポレート...

    株式会社ボルテージ

    フリーランス

    【Webデザイナー/コーダー】AdobeExperienceManager(AEM)を用いたWebサイト構築

    大手企業の採用HPから有名アニメの公式HP等のデザイン/ディレクションを行うクリエイティブ企業にて、W...