<input type=file> (HTML)

[5] HTML の input 要素は、 type 属性が file の時、ファイル選択制御子となります。

type

file (「file」 (「ファイル」) より)

属性名	属性値	既定値	説明	出典
`accept`	`%ContentTypes`		受入れ媒体型	[HTML 4]
`accesskey`	`%Character`			[HTML 4]
`align`			配置	[HTML 4] 非推奨
`class`			級	[HTML 4] %coreattrs
`dir`			書字方向	[HTML 4] %i18n
`disabled`	(真偽値属性)	(偽)	無効	[HTML 4]
`id`			一意識別子	[HTML 4] %coreattrs
`lang`			自然言語	[HTML 4] %i18n
`xml:lang`			自然言語	[XHTML 1]
`language`			スクリプト言語	WinIE 4+
`max`			最大ファイル数	廃止 → `multiple`	Web Forms 2.0
`min`			最小ファイル数	廃止	Web Forms 2.0
`multiple`			複数ファイル選択	HTML5
`name`			制御子名	[HTML 4]
`onblur`	`%Script`		焦点を失した時	[HTML 4]
`onchange`	`%Script`		現在値変更時	[HTML 4]
`onclick`				[HTML 4] %events
`ondblclick`				[HTML 4] %events
`onfocus`	`%Script`		焦点を得た時	[HTML 4]
`onkeydown`				[HTML 4] %events
`onkeypress`				[HTML 4] %events
`onkeyup`				[HTML 4] %events
`onmousedown`				[HTML 4] %events
`onmousemove`				[HTML 4] %events
`onmouseout`				[HTML 4] %events
`onmouseover`				[HTML 4] %events
`onmouseup`				[HTML 4] %events
`onselect`	`%Script`		文選択時	[HTML 4]
`readonly`	(真偽値属性)	(偽)	読取専用	[HTML 4]
`required`			必須	Web Forms 2.0
`style`			スタイル情報	[HTML 4] %coreattrs
`tabindex`	`NUMBER`		タブ順	[HTML 4]
`title`			注釈的題	[HTML 4] %coreattrs
`type`	`file`	`text`	制御子の種類	[HTML 4]
`value`			初期値	[HTML 4]

仕様書

[58] Web Applications 1.0 http://www.whatwg.org/specs/web-apps/current-work/complete.html#file-upload-state

初期値・現在値

[8] UA は、 value 属性の値を初期ファイル名としても構いません。 HTML 4 17.4.1

活性化動作

[59] 活性化動作は WA1 仕様上規定されていません (2011-09-19T10:44:47.500Z) が、どの Webブラウザーでもファイルの選択となっています。

[60] ファイル選択制御子は表示の自由度が低く著者に嫌われており、かわりに非表示にして独自の要素でレンダリングし、 click メソッドで選択ウィンドウを表示させる手法が流行しています。

[61] MDC でも紹介されています。 MDC によると Firefox4 以降が対応しているようです。

Using files from web applications - MDN (2011-09-19 19:39:48 +09:00 版) https://developer.mozilla.org/en/Using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method

[63] IE8 も対応していました。いつから対応しているのかはわかりません。

[62] テスト http://suika.fam.cx/~wakaba/-temp/test/html/form/file/click-1.html

ファイル選択

[17] ファイル・システム上にないファイル: input type file によって作られるファイル選択制御子は、必ずしもファイル・システムに現在存在するファイルを選択しなければならないのではありません。賢い利用者エージェントはその場で文書ファイルを作成したり、絵を描いたり、録音したりする機能を提供しているかもしれません。

そうはいってもそのことは HTML 4 では明確になっていませんでした。実際にそのような機能を実装している利用者エージェントがあるのかどうかは不明です。しかし、 input type を拡張して写真撮影や録音の機能を追加しようという提案 device-upload に対し、 W3C HTML WG は input type file で十分対応できるという結論を下しています。

Web Forms 2.0 はこの辺りの扱いも幾分明確化しようと試みています。

[38] ファイル・システムに存在しないファイルの名前

提出時のファイル名は、そのファイルがファイル・システムに保存されていない (その場で作られた) ものであるなどの理由でファイル名を陽に持たないなら、空文字列としなければなりません。 WF2 2.15

遠隔ファイルの選択

[33] ファイルとして選択され得るのは手元のファイルだけではありません。使用している環境さえ対応していれば、ネットワークで接続された近くの計算機上の共有されたファイルでも選択できるのが普通です。その他の任意の遠隔資源を選択することも仕様上問題となる点はなく、 >>14 のように (一時ファイルを一旦作成する形ながら) 既に実装もされています。

[44] multipart/form-data の仕様では message/external-body を使って遠隔ファイルを参照のままの形で提出できることになっていますが、それに対応している利用者エージェントはありません。フォーム処理エージェントも対応しているものはおそらくありません。 multipart/form-data 以外のフォーム提出用の媒体型にも遠隔ファイルのための仕組みは用意されていません。

複数ファイルの選択

[18] input type file によって作られるファイル選択制御子は、複数のファイルを選択できます。このことは HTML 4 などの仕様上も明確であり、 multipart/form-data による提出方法も規定されています。

しかし、実際には複数のファイルを選択できる利用者エージェントがあるのかどうかは不明です。多くの利用者エージェントは高々1つしか選択できません。また、フォーム処理エージェントもその状況を反映して複数ファイルが提出されることを想定していないものがほとんどと推定されます。

[45] Web Forms 2.0 はこの状況と互換性を保ちつつ複数ファイルを選択可能にしようと試みました。 Opera がそれを実装しましたが、この方法は HTML5 への統合時に廃止されました。 min、max の項を参照してください。

[46] HTML5 では multiple 属性が指定されていれば複数ファイルを提出可能であり、指定されていなければ単一ファイルのみ提出可能とされています。また、 multipart/form-data による提出も、従来の multipart/mixed を用いた方法ではなく、直接複数の実体本体として multipart/form-data に含める方法が採られています。こちらの方がより単純であり、利用者エージェントにとってもフォーム処理エージェントにとっても処理しやすいと思われます。

提出できないファイル

[36] 存在しないファイルや何らかの理由でうpできないファイルが指定されている場合、それらのファイルは提出されません。また、 min、max、 required の検査の際にも、指定されていないものとして扱われます。利用者には問題を報告することが推奨されていますが、スクリプトがこれを知る手段は用意されていません。 WF2 2.15

スクリプトから知ることができないのは、安全性や個人情報保護の観点から、どのファイルが存在していないかを漏らせるべきではないというのが理由です。

提出

[10] 提出の時の挙動についてはフォームの提出の説明をご覧ください。

[37] 失敗の通知

利用者エージェントは、一般のフォームの提出時の失敗と同様に、ファイルのうpの失敗についても、便利でアクセス可能な方法で利用者に説明するべきです。 WF2 2.15

歴史

HTML4

[6] HTML 4 (Web Forms 1.0)
- file select control IW:HTML4:"interact/forms.html#file-select"
- 17.4 The INPUT element IW:HTML4:"interact/forms.html#edef-INPUT"
- B.10.1 Security issues for forms IW:HTML4:"appendix/notes.html#forms-security"

WF2

[43] Web Forms 2.0
- 2.15. Extensions to file upload controls IW:WF2:"#upload"

実装

[19] Netscape Navigator 2 (2.02 日本語版、 Windows 95 版で確認) では Windows 標準の共通対話箱によりファイルを1つ選択できましたが、ファイルの種類が標準で HTML (拡張子が .html または .htm) に絞られていたため、他の種類のファイルを選ぶには毎回手動ですべてのファイルに絞り直さなければならず、不便でした。

[12] File Upload CGIで知らないと困ること http://www.tsden.org/ryutaroh/fileupload-j.shtml

現在となっては古い内容ですが、ブラウザのファイル送信機能の実装には色々と問題があったことが分かります。

[32] WinIE 3 は標準ではファイル選択制御子に対応していません。追加のソフトウェア部品として提供されていました。

[13] NC4 では、漢字コードの問題で、非 ASCII 文字を含むファイル名のファイルは選択できても送信できないことがありました。

[14] 遠隔ファイル: WinIE で Internet Shortcut を選択すると、 shortcut ではなく、リンク先 URI の資源を取ってきて、その一時ファイルのファイル名が表示・送信されるようです。

Internet Shortcut でない Shortcut がリンク先のファイル名に直されるのと同様、 Common Dialog control の仕様のようです (普通の shortcut のリンク先ににするかどうかは common dialog 呼び出しの option で指定できますから、それと同じ option か、新設の別の option でこの機能を無効化できると思いますが、詳しくは MSDN でも見て調べてください)。 WinIE に限らず、 Mozilla やメモ帳などでも再現しますから、 Common Dialog Control に組み込まれた機能とみて間違いないでしょう。

聞くところによりますと、この機能が実装されているのは Windows Me と Windows 2000 以降の Windows NT だそうです。おそらく Common Dialog Control の版に依存しますから、 WinIE の版などにも左右されるかもしれません。

[34] file upload http://dog.intcul.tohoku.ac.jp/html/javascript/input_file.html (名無しさん [sage])

[35] Bug 63687 - UI for <input type="file"> allowing multiple files to be uploaded https://bugzilla.mozilla.org/show_bug.cgi?id=63687

[57] ニンテンドー3DSのインターネットブラウザーでうpすると、 3D で撮影された写真も二次元の JPEG になります。 .JPG の適当なファイル名になるようです。

利用可能性

[20] 選択したファイルの大きさに比例して提出に時間がかかるはずです。利用者エージェントは利用者の便宜を図って、例えば予想転送時間を算出したり、提出中にそのことを分かりやすく利用者に知らせたり工夫するべきです。

また、大きなファイルを提出させるフォームの著者は、利用者に時間がかかることの注意を促すと良いかもしれません。 (但しどちらかといえば利用者界面の問題に属するものであって、著者が深く介入するべきでもないでしょう。)

保安性

[11] ファイル選択制御子を使ってファイルを選択すると、提出した時のそのファイルが送られることになります。利用者は、本当に送信しても良いファイルであるのか、送信しても良い相手なのか、十分に注意するべきです。

[3] 特に、 >>8 のように初期ファイル名を指定できるので、利用者が十分な確認をせずにフォームを提出してしまうと、意図せずにファイルを送信してしまうこととなり、危険です。

[15] HTML 4 仕様書は、利用者に明確に確認させずに UAがファイルを送るべきではなく、確認を取ることが期待されていると述べています。 HTML 4 B.10.1

CSS などで input 要素を非表示にすることもできますが、それによって利用者が気づかぬうちにファイルが送られてしまうことが無いように UA 実装者は注意しなければならないでしょう。

[16] HTML にはデータを転送する方法が用意されていません。 TLS を使うなど別途安全を確保する必要があります。

また、フォーム処理エージェントはうpされたファイルを適切に扱うべきです HTML 4 B.10.1。

[21] 選択したファイルの情報をスクリプトから取得・制御できると便利なこともあるかもしれません。しかし、利用者が知らないうちに勝手なファイルを送信したり、勝手にファイルの内容や情報を取得したりするために悪用される危険性もあります。

[48] Webアプリケーションの中には、利用者の体感速度の向上や提出途中のフォーム・データの保存の目的で利用者が意図しないうちに選択されたファイルを (JavaScript によって) 提出するものもあります。例えば Gmail は添付ファイルを選択すると、利用者が何もしないうちから選択された添付ファイルを鯖に提出します。

Flash による複数ファイルうp

[47] 複数ファイルの同時選択・提出は HTML4 で明記されている機能であるにも関わらず、 Opera が Web Forms 2.0 を実装するまでどの Webブラウザも対応してきませんでした。そのために、Webアプリケーションの中には Flash の機能を使って複数ファイルの同時提出を実現するものもあります。 (例えばはてなフォトライフ。)

[49] Ajaxian » Multi-file upload in the Flickr and Gmail house (2009-02-27 16:37:26 +09:00 版) http://ajaxian.com/archives/multi-file-upload-in-the-flickr-and-gmail-house

Webアプリケーションにおける Flash を用いたファイルうpの紹介記事です。

歴史

[78] WinIE 3.02 の file upload add-on で実装されました。

[1] type=file なのに親 form が enctype="multipart/form-data" でない場合の動作ですが、 WinIE6, Mozilla 1.4, Opera 7.20 で application/x-www-form-urlencoded, text/plain (Opera は未対応) ともに、ファイル名が送られました。ファイル名未指定のときには空文字列が送られました。
[2] 面白いことに、ファイル名は、 WinIE は完全経路名, Opera は完全経路名を " でくくったもの、 Mozilla は狭義のファイル名でした。 (Opera の multipart/form-data との動作の違いに注意。)

[4] >>2 の Opera の挙動はバグですよねぇ。そもそも >>1 の仮定自体が規格外ですから Opera を責めるつもりはまったくないですけど、引用符で囲むことに意味を見出せません。 Opera は既存ブラウザの互換性を幾分考えて設計されているのですから、わざわざ非互換にしたのだとしたら激しく謎です。

[39] Taken SPC : Firefox 3 における <input type="file"> で指定されたファイルへのアクセス (2007-09-21 14:32:31 +09:00 版) http://taken.s101.xrea.com/blog/article.php?id=809 (名無しさん)

[40] はてなダイアリー日記 - 「今日の1枚」での http:// や ftp:// で始まるURLの入力について (2007-09-20 19:01:35 +09:00 版) http://d.hatena.ne.jp/hatenadiary/20070919/1190166904 (名無しさん)

[41] input type="file" value inconsistencies (Daniel Veditz <dveditz@...> 著, 2007-11-14 07:57:22 +09:00 版) http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/12396 (名無しさん)

[42] Bug 143220 – [FIX]Script can get the value of a file control, including the path (2007-12-01 11:45:05 +09:00 版) https://bugzilla.mozilla.org/show_bug.cgi?id=143220 (名無しさん)

[50] ケータイからファイルアップロード質問と回答(Q&A) [okyuu.com] (2010-03-21 23:31:57 +09:00 版) http://okyuu.com/ja/question/7534

[51] au の W52CA の Webブラウザーでは、 <input type=file> は <input type=text><input type=button value=Browse...> のように解釈されます。

[52] HTML5 Revision Tracker (2010-07-29 07:16:03 +09:00 版) http://html5.org/tools/web-apps-tracker?from=5214&to=5215

[53] [whatwg] Directory upload via <input type="file" directory> (2010-07-29 07:32:34 +09:00 版) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-July/027401.html

[54] HTML Media Capture ( (2010-09-24 02:07:21 +09:00 版)) http://www.w3.org/TR/2010/WD-html-media-capture-20100928/

[55] ハードウェアが特定の条件下ではIEでfilter:alpha(opacity=N)が適用されない - blog.katsuma.tv (blog.katsuma.tv 著, 2011-03-07 12:39:57 +09:00 版) http://blog.katsuma.tv/2011/03/ie_filter_hardware_problem.html

[56] Opera: Opera 11.00 for Windows changelog ( (Frank M. Palinkas, Technical Writer, Opera Software ASA 著, 2011-04-24 11:17:12 +09:00 版)) http://www.opera.com/docs/changelogs/windows/1100/

[64] Web Applications 1.0 r7275 The 'name' of an <input type=file> field has to get newline-normalised. Also, some editorial tweaks. ( (2012-08-26 12:04:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=7274&to=7275