Loading article…
HTMLにおいて、ファイル選択コントロールは、ユーザーがローカルファイルを選択できるWebフォームの構成要素です。フォームが送信されると（場合によっては他のフォームデータと共に）、ファイルはWebサーバーにアップロードされます。ファイルが到着すると、通常はWebサーバー上にファイルを保存するなど、何らかの処理が行われます。ただし、具体的にどのような処理が行われるかは、フォームが送信されるサーバーサイドスクリプトによって決定されます。
以下は、ファイル選択コントロールを含むWebフォームのコード例です。ファイル選択コントロールを作成するのは、input要素です。type="file"
< form action = "form-handler.php" method = "post" enctype = "multipart/form-data" > <div> < input id = " myfile " name = " myfile " type = "file" > < input value = "アップロード►" type = " submit" > </div> </form>ファイル選択コントロールの画面表示に関しては、Webブラウザによって多少の違いがあります。一般的に、Windowsベースのプラットフォームでは、ユーザーエージェントはファイル選択コントロールをテキストフィールドと「参照」ボタンとして表示します。「参照」ボタンをクリックするとファイルダイアログが開き、そこでプラットフォーム上で実際のファイル選択を行うことができます。選択後、選択したファイルのファイル名がテキストフィールドに表示されます。あるいは、「参照」ボタンを使用する代わりに、ファイル名をテキストフィールドに直接入力することもできます。
Firefoxなどの一部のブラウザ[1]では、ファイル名を直接入力することができなくなりました。これはセキュリティ対策であり、ユーザーを騙して機密情報をアップロードさせることが可能です[ 2 ] 。
フォームベースのファイルアップロードの仕組みは、当初、RFC 1867（1995年11月公開）において、HTML 2.0（RFC 1866）の公開後に、その拡張機能として提案されました。その後、フォームベースのファイルアップロードはHTML 3.2に組み込まれ、フォームベースのファイルアップロードに関する詳細情報については、RFC 1867が明示的に参照されています。
HTML 4.01 自体はファイル選択コントロールの動作方法を記述していませんが、RFC 2388 と RFC 1867 を参照として挙げています。[ 3 ]
RFC 1867 の意図は、単一のファイル選択コントロールで複数のファイルを選択できるようにすることです。この意図は HTML 4.01 にも反映されているようで、ファイル選択コントロールタイプについては[ 4 ]と記載されています。
このコントロールタイプを使用すると、ユーザーはファイルを選択し、その内容をフォームとともに送信できます。ファイル選択コントロールを作成するには、INPUT要素を使用します。
上記の引用文中の複数形の「files」は、HTML 4.01 では単一ファイル選択コントロールが単一ファイルだけでなく複数のファイルの選択も処理することになっていたことを示していると指摘されている [ 5 ]。
HTML5では、ファイル入力が複数のファイルを受け入れる必要がある場合に「multiple」属性を追加することで、この状況が明確化されています。現在のドラフトでは、新しい動作は次のように規定されています。
複数属性が設定されていない限り、選択されたファイルのリストには1つのファイルしか含まれていてはならない。[ 6 ]
RFC 1867では、要素acceptに属性も導入されました。これにより、ファイル選択コントロールにおいてMIMEタイプinputに基づいたファイルタイプのフィルタリングが可能になります。
さらに、INPUTタグに、カンマ区切りのメディアタイプのリストであるACCEPT属性を持たせることが提案されている。
ACCEPT属性が存在する場合、ブラウザは、プラットフォームに対応する適切なファイル拡張子を持つファイルパターンに一致するように、入力を求められるファイルパターンを制限する可能性があります。
したがって、ユーザーエージェントは、例えば以下のように、GIFおよびPNG画像、または任意の画像に限定して、ファイルの選択を制限することができます。
< input id = "myfile" name = "myfile" type = "file" accept = "image/gif,image/png" > < input id = "myfile" name = "myfile" type = "file" accept = "image/*" >Windowsプラットフォームでは、これはユーザーエージェントがファイル参照ダイアログで指定された種類のファイルのみを表示することを意味する可能性があります。
ファイル選択コントロールの基本的なサポートは、ブラウザベンダーによってすぐに採用されました。たとえば、Internet Explorer 4 [ 7 ] 、 Netscape Navigator 2.0、Opera 3.5 [ 8 ]inputはすでに要素をtype="file"ファイル選択コントロールとして認識していました。
しかし、ほとんどの最新のブラウザは、意図されたとおりにファイル選択コントロールを実装していないか、特定の機能が欠けている。[ 5 ]
フォームベースの複数ファイルのアップロードは、単一のファイル選択コントロールを使用して、Chrome、Firefox、Internet Explorer、Safari、Opera の最新バージョンでサポートされています。ある情報源[ 5 ]によると、Opera は単一のファイル選択コントロールによる複数ファイルの選択をサポートしています。これは、ファイルアップロード機能が導入された 3.5 以降の Opera バージョンで当てはまりました。[ 8 ]しかし、Opera 7 の最初のベータ版リリースでは、この機能は利用できなくなりました。Firefox バージョン 3.6 では、複数ファイルの選択がサポートされるようになり[ 9 ] 、開発者はHTML5 ファイル APIを介して、サーバーにアップロードされる前にファイル自体に部分的にアクセスできるようになりました。[ 10 ]この機能により、ユーザーは外部アプリケーション ( Windows エクスプローラーなど) から Web アプリケーションにファイルを直接ドラッグ アンド ドロップすることもできます。この機能のサポートの注目すべき例の 1 つは、この方法で添付ファイルを追加できるGmailです。
HTML5では、 input要素のmultiple属性を使用して複数のファイルをアップロードできます。[ 11 ]
一つの解決策は、 JavaScriptなどのクライアントサイドスクリプトを使用して、ユーザーがアップロード用に選択したファイルごとにファイル選択コントロールを別途生成することです。CSSを使用すれば、これらの追加のファイル選択コントロールを表示しないように設定できます。この手法の例は、 jQuery用のMultiple File Uploadプラグインで示されています。このようにして、ユーザーがアップロードするファイルの数だけファイル選択コントロールを提供することで、複数ファイルのアップロードの問題を解決します。しかし、これだけではInternet Explorerでアップロード用に複数のファイルを選択する際の問題は解決されません。
accept属性は現在、Opera 11以降、Chrome 16以降、Safari 6以降、Firefox 9以降、およびMicrosoft Internet Explorer 10以降でサポートされています。
{{cite web}}: CS1メンテナンス: アーカイブサービスは非推奨になりました (リンク){{cite web}}: CS1 maint: 数値名: 著者リスト (リンク)