[解決済み] ファイル入力の'accept'属性 - 役に立ちますか?
2022-03-15 03:45:58
質問
html でファイルアップロードを実装するのは非常に簡単ですが、accept 属性があることに気づきました。
<input type="file" ...>
タグを使用します。
この属性は、ファイルアップロードを画像などに限定する方法として有用でしょうか?また、どのような使い方をすればよいのでしょうか?
あるいは、htmlファイル入力タグのファイルダイアログで、できればファイルタイプを制限する方法はないでしょうか?
解決方法は?
その
accept
属性は非常に便利です。これは、ブラウザに対して、現在の
input
. これは通常、ユーザーによって上書きすることができますが、デフォルトではユーザーの検索結果を絞り込むのに役立ち、ユーザーは100種類ものファイルタイプをふるいにかけることなく、探しているものを正確に入手することができるようになります。
使用方法
注意 これらの例は、現在の仕様に基づいて書かれており、実際にはすべての(あるいはすべての)ブラウザで動作するとは限りません。また、将来的に仕様が変更される可能性もあり、その場合はこれらの例が壊れる可能性があります。
h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }
<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>
<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>
<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>
<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>
<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>
HTML仕様書より( ソース )
は
accept
属性を指定することで、ユーザーエージェントに どのような種類のファイルが受け入れられるかを示すヒントが得られます。指定する場合、この属性は カンマで区切られたトークンのセット , である必要があります。 ASCIIの大文字・小文字を区別しない のいずれかにマッチする。
文字列
audio/*
- サウンドファイルを受け付けることを示す。
文字列
video/*
- 動画ファイルを受け付けることを示す。
文字列
image/*
- 画像ファイルを受け付けることを示す。
A パラメータを持たない有効なMIMEタイプ
- 指定されたタイプのファイルを受け入れることを示す。
最初の文字がU+002E FULL STOP文字(.)である文字列
- 指定されたファイル拡張子を持つファイルを受け付けることを示す。
関連
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] jQueryを使用してハイパーリンクのhref属性を変更する方法
-
[解決済み] jQueryでdata属性で要素を選択する
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)
-
[解決済み] <input type="file"> に画像ファイルしか受け付けないようにするには?
-
[解決済み】<input type="file">でファイル形式を制限する?
-
[解決済み】標準的なhtmlファイル入力にファイルをドラッグドロップする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] HTML IFステートメント
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み】<input type="file">でファイル形式を制限する?