ファイル選択制御子

<input type=file> (HTML)

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

[7]

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最大ファイル数廃止 → multipleWeb 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
tabindexNUMBERタブ順[HTML 4]
title注釈的題[HTML 4] %coreattrs
typefiletext制御子の種類[HTML 4]
value初期値[HTML 4]

仕様書

初期値・現在値

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

活性化動作

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

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

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

ファイル選択

[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 への統合時に廃止されました。 minmax の項を参照してください。

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

提出できないファイル

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

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

提出

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

[37] 失敗の通知

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

歴史

HTML4

WF2

実装

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

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

聞くところによりますと、この機能が実装されているのは Windows MeWindows 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添付ファイルを選択すると、 利用者が何もしないうちから選択された添付ファイル提出します。

関連

[9] form 要素の enctype 属性は、 file 制御子を使う時には multipart/form-data とするべきです HTML 4 17.3

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

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

[49] Ajaxian » Multi-file upload in the Flickr and Gmail house ( 版) http://ajaxian.com/archives/multi-file-upload-in-the-flickr-and-gmail-house

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

歴史

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

[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 &#8211; [FIX]Script can get the value of a file control, including the path ( 版) https://bugzilla.mozilla.org/show_bug.cgi?id=143220 (名無しさん)

[50] ケータイからファイルアップロード 質問と回答(Q&A) [okyuu.com] ( 版) http://okyuu.com/ja/question/7534

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

[52] HTML5 Revision Tracker ( 版) http://html5.org/tools/web-apps-tracker?from=5214&to=5215

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

[54] HTML Media Capture ( ( 版)) http://www.w3.org/TR/2010/WD-html-media-capture-20100928/

[55] ハードウェアが特定の条件下ではIEでfilter:alpha(opacity=N)が適用されない - blog.katsuma.tv (blog.katsuma.tv 著, 版) 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 著, 版)) 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. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7274&to=7275

[65] Web Applications 1.0 r7578 Seems nobody implemented the path thing, so let's not leave it in. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7577&to=7578

[66] [whatwg] Proposal: API to ask the user for a file ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-August/040642.html

[67] [whatwg] Forms: <input type=file> and directory tree picking ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-August/040645.html

[68] Web Applications 1.0 r8155 <input type=file>.click() wasn't defined ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8154&to=8155

[69] Bug 23497 – Mechanism for allowing cloud storage providers to hook into type=file ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=23497

[70] Bug 22682 – Make <input type=file>.files writable ( ( 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=22682

[71] [whatwg] Forms-related feedback ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-December/041681.html

[72] HTML Standard ( ( 版)) http://www.whatwg.org/specs/web-apps/current-work/#file-upload-state-(type=file)

[73] Web Applications 1.0 r8367 Revamp 'input' and 'change' event logic for <input> elements. The primary goal here is to make 'input' events fire on type=checkbox, type=radio, and type=file, but this also improves the way other things here are phrased. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8366&to=8367

[74] Re: File upload from a Web browser from Larry Masinter on 1995-07-13 (stdin) ( (Larry Masinter (masinter_at_parc.xerox.com) 著, 版)) http://inkdroid.org/tmp/www-talk/9375.html

[75] File upload in HTML forms from Ernesto Nebel on 1994-09-23 (stdin) ( (Ernesto Nebel (nebel_at_xsoft.sd.xerox.com) 著, 版)) http://inkdroid.org/tmp/www-talk/6740.html

[76] Welcome to Netscape Navigator Version 2.0 ( ( 版)) http://web.archive.org/web/20030202175634/http://wp.netscape.com/eng/mozilla/2.0/relnotes/windows-2.0.html#Images

[22] Clear internal value when <input> changes to type="file" state · whatwg/html@a55d6e6 ( 版) https://github.com/whatwg/html/commit/a55d6e6b5e78c62fa8b3a78e818f8b2323536f8f

[23] IE11 では、 文書中にない要素click してもダイアログは表示されません。 FirefoxChrome では表示されます。

[24] File and Directory Upload in Chrome - Google ドキュメント ( ()) https://docs.google.com/document/d/14fCaoRf5GtdhMwJOVjcQSMDm_varTluyMq8RYyHR8vw/edit?pref=2&pli=1

[25] Changes to DOM - NW.js Documentation () http://docs.nwjs.io/en/latest/References/Changes%20to%20DOM/

[26] Make <input type=file>.files settable (annevk著, ) https://github.com/whatwg/html/commit/5dc7db2108656c9ce4b2dc7a8bb7dcde5c03afee

[27] Editorial: no more "return, but continue" for <input type=file> (annevk著, ) https://github.com/whatwg/html/commit/b2fc1c1d49ad5701b4bdcf80dcee115c3167005e

[28] Editorial: no more "return, but continue" for <input type=file> by annevk · Pull Request #3388 · whatwg/html () https://github.com/whatwg/html/pull/3388

[29] New WebKit Features in Safari 11.1 | WebKit () https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/

[30] element send keys: <input type=file> also has to fire change event (#… (whimboo著, ) https://github.com/w3c/webdriver/commit/036194529785018eaf385bab1a129387539cbbb5

[31] Element Send Keys for "<input type=file>" has to also send a change event. by whimboo · Pull Request #1262 · w3c/webdriver () https://github.com/w3c/webdriver/pull/1262

[77] HTMLのinputタグ[type=file]のブラウザごとの挙動について調べてみた - Qiita () https://qiita.com/taqm/items/4d31d88befb36f46714f

[79] Revamp the user activation model (mustaqahmed, , ) https://github.com/whatwg/html/commit/8f8c1f50158736b3cf16188377a0974a20367c8b