[5] [[HTML]] の [CODE(HTMLe)[[[input]]]] 要素は、 [CODE(HTMLa)[[[type]]]] 属性が [DFN[[CODE(HTML)[file]]]] の時、[DFN[ファイル選択制御子]]となります。 [7] :[CODE(HTMLa)@en[[[type]]]]:[CODE(HTML)@en[[[file]]]] (「[[file]]」 (「[[ファイル]]」) より) :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,出典 ,[CODE(HTMLa)[[[accept]]]] ,[CODE(SGML)[%[[ContentTypes]]]] , ,受入れ媒体型 ,[HTML 4] ,[CODE(HTMLa)[[[accesskey]]]] ,[CODE(SGML)[%[[Character]]]] , , ,[HTML 4] ,[CODE(HTMLa)[[[align]]]] , , ,配置 ,[HTML 4] 非推奨 ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML 4] %[[coreattrs]] ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML 4] %[[i18n]] ,[CODE(HTMLa)[[[disabled]]]] ,(真偽値属性) ,(偽) ,無効 ,[HTML 4] ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML 4] %coreattrs ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML 4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML 1] ,[CODE(HTMLa)[[[language]]]] , , ,スクリプト言語 ,[[WinIE 4]]+ ,[CODE(HTMLa)@en[[[max]]]],,,最大ファイル数,廃止 → [CODE(HTMLa)@en[[[multiple]]]],[[Web Forms 2.0]] ,[CODE(HTMLa)@en[[[min]]]],,,最小ファイル数,廃止,[[Web Forms 2.0]] ,[CODE(HTMLa)@en[[[multiple]]]],,,複数ファイル選択,[[HTML5]] ,[CODE(HTMLa)[[[name]]]] , , ,制御子名 ,[HTML 4] ,[CODE(HTMLa)[[[onblur]]]] ,[CODE(SGML)[%[[Script]]]] , ,焦点を失した時 ,[HTML 4] ,[CODE(HTMLa)[[[onchange]]]] ,[CODE(SGML)[%[[Script]]]] , ,現在値変更時 ,[HTML 4] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML 4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onfocus]]]] ,[CODE(SGML)[%[[Script]]]] , ,焦点を得た時 ,[HTML 4] ,[CODE(HTMLa)[[[onkeydown]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onkeypress]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onkeyup]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmousedown]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmousemove]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmouseout]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmouseover]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onmouseup]]]] , , , ,[HTML 4] %events ,[CODE(HTMLa)[[[onselect]]]] ,[CODE(SGML)[%[[Script]]]] , ,文選択時 ,[HTML 4] ,[CODE(HTMLa)[[[readonly]]]] ,(真偽値属性) ,(偽) ,読取専用 ,[HTML 4] ,[CODE(HTMLa)@en[[[required]]]],,,必須,[[Web Forms 2.0]] ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML 4] %coreattrs ,[CODE(HTMLa)[[[tabindex]]]] ,[CODE(SGML)[[[NUMBER]]]] , ,タブ順 ,[HTML 4] ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML 4] %coreattrs ,[CODE(HTMLa)[[[type]]]] ,'''[CODE(HTML)[file]]''' ,[CODE(HTML)[[[text]]]] ,制御子の種類 ,[HTML 4] ,[CODE(HTMLa)[[[value]]]] , , ,初期値 ,[HTML 4] * 仕様書 [REFS[ - [58] [CITE@en-US-x-hixie[Web Applications 1.0]] ]REFS] * 初期値・現在値 [8] [[UA]] は、 [CODE(HTMLa)[value]] 属性の値を初期ファイル名としても構いません。 [SRC[HTML 4 17.4.1]] * 活性化動作 [59] [[活性化動作]]は [[WA1]] 仕様上規定されていません ([TIME[2011-09-19T10:44:47.500Z]]) が、 どの [[Webブラウザー]]でも[[ファイル]]の選択となっています。 [60] [[ファイル選択制御子]]は表示の自由度が低く[[著者]]に嫌われており、 かわりに非表示にして独自の[[要素]]でレンダリングし、 [CODE(DOMm)@en[[[click]]]] [[メソッド]]で選択ウィンドウを表示させる手法が流行しています。 ;; [61] [[MDC]] でも紹介されています。 [[MDC]] によると [[Firefox]]4 以降が対応しているようです。 [REFS[ - [CITE@en[Using files from web applications - MDN]] ([TIME[2011-09-19 19:39:48 +09:00]] 版) ]REFS] ;; [63] [[IE8]] も対応していました。いつから対応しているのかはわかりません。 [REFS[ - [62] テスト ]REFS] * ファイル選択 [17] '''ファイル・システム上にないファイル''': [CODE(HTMLe)[input]] [CODE(HTMLa)[type]] [CODE(HTML)[file]] によって作られるファイル選択制御子は、 必ずしも[[ファイル・システム]]に現在存在するファイルを選択しなければならないのではありません。 賢い利用者エージェントはその場で文書ファイルを作成したり、 絵を描いたり、録音したりする機能を提供しているかもしれません。 そうはいってもそのことは HTML 4 では明確になっていませんでした。 実際にそのような機能を実装している利用者エージェントがあるのかどうかは不明です。 しかし、 [CODE(HTMLe)[input]] [CODE(HTMLa)[type]] を拡張して写真撮影や録音の機能を追加しようという提案 [SRC[[[device-upload]]]] に対し、 W3C HTML WG は [CODE(HTMLe)[input]] [CODE(HTMLa)[type]] [CODE(HTML)[file]] で十分対応できるという結論を下しています。 [[Web Forms 2.0]] はこの辺りの扱いも幾分明確化しようと試みています。 [38] '''ファイル・システムに存在しないファイルの名前''' [[提出]]時の[[ファイル名]]は、 その[[ファイル]]が[[ファイル・システム]]に保存されていない (その場で作られた) ものであるなどの理由で[[ファイル名]]を陽に持たないなら、 [[空文字列]]と[['''しなければなりません''']]。 [SRC@en[WF2 2.15]] ** 遠隔ファイルの選択 [33] [[ファイル]]として選択され得るのは手元のファイルだけではありません。 使用している環境さえ対応していれば、 [[ネットワーク]]で接続された近くの[[計算機]]上の[[共有]]された[[ファイル]]でも選択できるのが普通です。 その他の任意の遠隔[[資源]]を選択することも仕様上問題となる点はなく、 >>14 のように [WEAK[(一時ファイルを一旦作成する形ながら)]] 既に実装もされています。 [44] [CODE(MIME)@en[[[multipart/form-data]]]] の仕様では [CODE(MIME)@en[[[message/external-body]]]] を使って[[遠隔ファイル]]を参照のままの形で[[提出]]できることになっていますが、 それに対応している[[利用者エージェント]]はありません。 [[フォーム処理エージェント]]も対応しているものはおそらくありません。 [CODE(MIME)@en[[[multipart/form-data]]]] 以外の[[フォーム提出]]用の[[媒体型]]にも[[遠隔ファイル]]のための仕組みは用意されていません。 ** 複数ファイルの選択 [18] [CODE(HTMLe)[input]] [CODE(HTMLa)[type]] [CODE(HTML)[file]] によって作られるファイル選択制御子は、 複数のファイルを選択できます。このことは HTML 4 などの仕様上も明確であり、 [CODE(MIME)[[[multipart/form-data]]]] による提出方法も規定されています。 しかし、実際には複数のファイルを選択できる利用者エージェントがあるのかどうかは不明です。 多くの利用者エージェントは高々1つしか選択できません。 また、[[フォーム処理エージェント]]もその状況を反映して複数ファイルが提出されることを想定していないものがほとんどと推定されます。 [45] [[Web Forms 2.0]] はこの状況と互換性を保ちつつ複数ファイルを選択可能にしようと試みました。 [[Opera]] がそれを実装しましたが、この方法は [[HTML5]] への統合時に廃止されました。 [CODE(HTMLa)@en[[[min]]]]、[CODE(HTMLa)@en[[[max]]]] の項を参照してください。 [46] [[HTML5]] では [CODE(HTMLa)@en[[[multiple]]]] [[属性]]が指定されていれば複数ファイルを[[提出]]可能であり、 指定されていなければ単一ファイルのみ[[提出]]可能とされています。 また、 [CODE(MIME)@en[[[multipart/form-data]]]] による[[提出]]も、従来の [CODE(MIME)@en[[[multipart/mixed]]]] を用いた方法ではなく、直接複数の[[実体本体]]として [CODE(MIME)@en[[[multipart/form-data]]]] に含める方法が採られています。 こちらの方がより単純であり、[[利用者エージェント]]にとっても[[フォーム処理エージェント]]にとっても処理しやすいと思われます。 ** 提出できないファイル [36] 存在しない[[ファイル]]や何らかの理由で[[うp]]できない[[ファイル]]が指定されている場合、 それらの[[ファイル]]は[[提出]]されません。 また、 [CODE(HTMLa)@en[[[min]]]]、[CODE(HTMLa)@en[[[max]]]]、 [CODE(HTMLa)@en[[[required]]]] の検査の際にも、 指定されていないものとして扱われます。 [[利用者]]には問題を報告することが[['''推奨''']]されていますが、 [[スクリプト]]がこれを知る手段は用意されていません。 [SRC@en[WF2 2.15]] ;; [[スクリプト]]から知ることができないのは、 [[安全性]]や[[個人情報保護]]の観点から、 どの[[ファイル]]が存在していないかを漏らせるべきではないというのが理由です。 [[#comment]] * 提出 [10] 提出の時の挙動についてはフォームの[[提出]]の説明をご覧ください。 [37] '''失敗の通知''' [[利用者エージェント]]は、 一般の[[フォーム]]の[[提出]]時の失敗と同様に、 [[ファイル]]の[[うp]]の失敗についても、 便利で[[アクセス可能]]な方法で[[利用者]]に説明[['''するべきです''']]。 [SRC@en[WF2 2.15]] * 歴史 ** HTML4 [REFS[ -[6] [[HTML 4]] ([[Web Forms 1.0]]) -- file select control -- 17.4 The [CODE(HTMLe)[INPUT]] element -- [CITE[B.10.1 Security issues for forms]] ]REFS] ** WF2 [REFS[ -[43] [[Web Forms 2.0]] -- [CSECTION@en[2.15. Extensions to file upload controls]] ]REFS] * 実装 [19] [[Netscape Navigator 2]] [WEAK[(2.02 日本語版、 [[Windows 95]] 版で確認)]] では [[Windows]] 標準の共通対話箱によりファイルを1つ選択できましたが、 ファイルの種類が標準で [[HTML]] ([[拡張子]]が [CODE(file)[.html]] または [CODE(file)[.htm]]) に絞られていたため、 他の種類のファイルを選ぶには毎回手動で[Q[すべてのファイル]] に絞り直さなければならず、不便でした。 [12] ''File Upload CGIで知らないと困ること'' 現在となっては古い内容ですが、 ブラウザのファイル送信機能の実装には色々と問題があったことが分かります。 [32] [[WinIE 3]] は標準ではファイル選択制御子に対応していません。 追加のソフトウェア部品として提供されていました。 [13] [[NC4]] では、[[漢字コード]]の問題で、非 ASCII 文字を含むファイル名のファイルは選択できても送信できないことがありました。 [14] '''遠隔ファイル''': [[WinIE]] で [[Internet Shortcut]] を選択すると、 shortcut ではなく、リンク先 URI の資源を取ってきて、その一時ファイルのファイル名が表示・送信されるようです。 Internet Shortcut でない [[Shortcut]] がリンク先のファイル名に直されるのと同様、 [[Common Dialog]] control の仕様のようです [WEAK[(普通の shortcut のリンク先ににするかどうかは common dialog 呼び出しの option で指定できますから、それと同じ option か、新設の別の option でこの機能を無効化できると思いますが、詳しくは [[MSDN]] でも見て調べてください)]]。 WinIE に限らず、 [[Mozilla]] や[[メモ帳]]などでも再現しますから、 Common Dialog Control に組み込まれた機能とみて間違いないでしょう。 聞くところによりますと、この機能が実装されているのは [[Windows Me]] と [[Windows 2000]] 以降の [[Windows NT]] だそうです。 おそらく Common Dialog Control の版に依存しますから、 WinIE の版などにも左右されるかもしれません。 [34] [CITE[file upload]] ([[名無しさん]] [sage]) [35] [CITE[Bug 63687 - UI for allowing multiple files to be uploaded]] [57] [[ニンテンドー3DS]]の[[インターネットブラウザー]]で[[うp]]すると、 [[3D]] で撮影された[[写真]]も[[二次元]]の [[JPEG]] になります。 [CODE(file)[[[.JPG]]]] の適当なファイル名になるようです。 * 利用可能性 [20] 選択した[[ファイル]]の大きさに比例して[[提出]]に時間がかかるはずです。 [[利用者エージェント]]は[[利用者]]の便宜を図って、 例えば予想転送時間を算出したり、提出中にそのことを分かりやすく利用者に知らせたり工夫するべきです。 また、大きなファイルを提出させる[[フォーム]]の[[著者]]は、 [[利用者]]に時間がかかることの注意を促すと良いかもしれません。 (但しどちらかといえば[[利用者界面]]の問題に属するものであって、 著者が深く介入するべきでもないでしょう。) * 保安性 [11] ファイル選択制御子を使ってファイルを選択すると、 提出した時のそのファイルが送られることになります。 利用者は、本当に送信しても良いファイルであるのか、 送信しても良い相手なのか、十分に注意するべきです。 [3] 特に、 >>8 のように初期ファイル名を指定できるので、 利用者が十分な確認をせずにフォームを提出してしまうと、 意図せずにファイルを送信してしまうこととなり、危険です。 [15] HTML 4 仕様書は、利用者に明確に確認させずに [ABBR[UA] [利用者エージェント]]がファイルを送るべきではなく、 確認を取ることが期待されていると述べています。 [SRC[HTML 4 B.10.1]] [ABBR[[[CSS]]] [Cascading Style Sheets]] などで [CODE(HTMLe)[input]] 要素を非表示にすることもできますが、 それによって利用者が気づかぬうちにファイルが送られてしまうことが無いように [ABBR[UA] [利用者エージェント]] 実装者は注意しなければならないでしょう。 [16] [ABBR[HTML] [Hypertext Markup Language]] にはデータを転送する方法が用意されていません。 [ABBR[[[TLS]]]] を使うなど別途安全を確保する必要があります。 また、[[フォーム処理エージェント]]は[ABBR[[[うp]]] [upload]]されたファイルを適切に扱うべきです [SRC[HTML 4 B.10.1]]。 [21] 選択した[[ファイル]]の情報を[[スクリプト]]から取得・ 制御できると便利なこともあるかもしれません。しかし、 [[利用者]]が知らないうちに勝手な[[ファイル]]を送信したり、 勝手に[[ファイル]]の内容や情報を取得したりするために悪用される危険性もあります。 [48] [[Webアプリケーション]]の中には、[[利用者]]の体感速度の向上や[[提出]]途中の[[フォーム・データ]]の保存の目的で[[利用者]]が意図しないうちに選択された[[ファイル]]を ([[JavaScript]] によって) [[提出]]するものもあります。 例えば [[Gmail]] は[[添付ファイル]]を選択すると、 [[利用者]]が何もしないうちから選択された[[添付ファイル]]を[[鯖]]に[[提出]]します。 * 関連 [9] [CODE(HTMLe)[[[form]]]] 要素の [CODE(HTMLa)[[[enctype]]]] 属性は、 [CODE(HTML)[file]] 制御子を使う時には [CODE(MIME)[[[multipart/form-data]]]] とするべきです [SRC[HTML 4 17.3]]。 ** Flash による複数ファイルうp [47] 複数ファイルの同時選択・提出は [[HTML4]] で明記されている機能であるにも関わらず、 [[Opera]] が [[Web Forms 2.0]] を実装するまでどの [[Webブラウザ]]も対応してきませんでした。 そのために、[[Webアプリケーション]]の中には [[Flash]] の機能を使って複数ファイルの同時[[提出]]を実現するものもあります。 (例えば[[はてなフォトライフ]]。) [49] [CITE@en[Ajaxian » Multi-file upload in the Flickr and Gmail house]] ([TIME[2009-02-27 16:37:26 +09:00]] 版) [[Webアプリケーション]]における [[Flash]] を用いた[[ファイルうp]]の紹介記事です。 * メモ - [1] [CODE(HTML)[type=file]] なのに親 [CODE(HTMLe)[[[form]]]] が [CODE(HTML)[[[enctype]]="[CODE(MIME)[[[multipart/form-data]]]]"]] でない場合の動作ですが、 [[WinIE6]], [[Mozilla]] 1.4, [[Opera]] 7.20 で [CODE(MIME)[[[application/x-www-form-urlencoded]]]], [CODE(MIME)[[[text/plain]]]] (Opera は未対応) ともに、ファイル名が送られました。ファイル名未指定のときには空文字列が送られました。 - [2] 面白いことに、ファイル名は、 WinIE は[[完全経路名]], Opera は完全経路名を [CODE(char)["]] でくくったもの、 Mozilla は狭義の[[ファイル名]]でした。 (Opera の [CODE(MIME)[multipart/form-data]] との動作の違いに注意。) - [4] >>2 の Opera の挙動はバグですよねぇ。そもそも >>1 の仮定自体が規格外ですから Opera を責めるつもりはまったくないですけど、引用符で囲むことに意味を見出せません。 Opera は既存ブラウザの互換性を幾分考えて設計されているのですから、わざわざ非互換にしたのだとしたら激しく謎です。 [39] [CITE@ja[Taken SPC : Firefox 3 における で指定されたファイルへのアクセス]] ([CODE[2007-09-21 14:32:31 +09:00]] 版) ([[名無しさん]]) [40] [CITE[はてなダイアリー日記 - 「今日の1枚」での http:// や ftp:// で始まるURLの入力について]] ([CODE[2007-09-20 19:01:35 +09:00]] 版) ([[名無しさん]]) [41] [CITE[input type="file" value inconsistencies]] ([[Daniel Veditz ]] 著, [CODE[2007-11-14 07:57:22 +09:00]] 版) ([[名無しさん]]) [42] [CITE[Bug 143220 – '''['''FIX''']'''Script can get the value of a file control, including the path]] ([TIME[2007-12-01 11:45:05 +09:00]] 版) ([[名無しさん]]) [50] [CITE@ja[ケータイからファイルアップロード 質問と回答(Q&A) '''['''okyuu.com''']''']] ([TIME[2010-03-21 23:31:57 +09:00]] 版) [51] [[au]] の [[W52CA]] の [[Webブラウザー]]では、 [CODE(HTML)@en[]] は [CODE(HTML)@en[]] のように解釈されます。 [52] [CITE@en[HTML5 Revision Tracker]] ([TIME[2010-07-29 07:16:03 +09:00]] 版) [53] [CITE['''['''whatwg''']''' Directory upload via ]] ([TIME[2010-07-29 07:32:34 +09:00]] 版) [54] [CITE@en[HTML Media Capture]] ( ([TIME[2010-09-24 02:07:21 +09:00]] 版)) [55] [CITE@ja[ハードウェアが特定の条件下ではIEでfilter:alpha(opacity=N)が適用されない - blog.katsuma.tv]] ([[blog.katsuma.tv]] 著, [TIME[2011-03-07 12:39:57 +09:00]] 版) [56] [CITE@en[Opera: Opera 11.00 for Windows changelog]] ( ([[Frank M. Palinkas, Technical Writer, Opera Software ASA]] 著, [TIME[2011-04-24 11:17:12 +09:00]] 版)) [64] [CITE@en[Web Applications 1.0 r7275 The 'name' of an field has to get newline-normalised. Also, some editorial tweaks.]] ( ([TIME[2012-08-26 12:04:00 +09:00]] 版)) [65] [CITE@en[Web Applications 1.0 r7578 Seems nobody implemented the path thing, so let's not leave it in.]] ( ([TIME[2012-12-11 05:24:00 +09:00]] 版)) [66] [CITE[''''''[''''''whatwg'''''']'''''' Proposal: API to ask the user for a file]] ( ([TIME[2013-08-30 09:02:48 +09:00]] 版)) [67] [CITE[''''''[''''''whatwg'''''']'''''' Forms: and directory tree picking]] ( ([TIME[2013-08-30 06:09:44 +09:00]] 版)) [68] [CITE@en[Web Applications 1.0 r8155 .click() wasn't defined]] ( ([TIME[2013-08-30 04:53:00 +09:00]] 版)) [69] [CITE@en[Bug 23497 – Mechanism for allowing cloud storage providers to hook into type=file]] ( ([TIME[2013-10-14 22:52:04 +09:00]] 版)) [70] [CITE@en[Bug 22682 – Make .files writable]] ( ([TIME[2013-10-14 22:53:06 +09:00]] 版)) [71] [CITE[''''''[''''''whatwg'''''']'''''' Forms-related feedback]] ( ([TIME[2013-12-03 20:56:46 +09:00]] 版))