type='file' (ファイル)

実行例

表示イメージ

プロパティ

value

type='file'のvalueプロパティへのアクセスには、セキュリティ上の理由により制約が設けられています。

  • 取得 … C:\fakepath\filenameのパスのみ
  • 設定 … 空文字とnullのみ

これらの制約は、ブラウザによっては下表のように違いがあります。

ブラウザ 取得結果の書式 設定の可否
空文字 空文字以外
Internet Explorer 6,7,8,9 C:\fakepath\filename ×
Mozilla Firefox filename ○ ×
Google Chrome C:\fakepath\filename ○ ×
Safari C:\fakepath\filename ○ ×
Opera C:\fakepath\filename ×
お使いのブラウザでのvalueの値を確認できます。

valueのクリア

valueへの空文字の設定が認められているブラウザは、value=''とすればvalueの値はクリアされます。一方で、それ以外のブラウザにも対応させるには工夫が必要です。

まずinput要素を内包する要素を作成します。

<div><type="file" input id="file" /></div>

そしてvalueの値をクリアするときには、

var file = document.getElementById( 'file' );
file.parentNode.innerHTML = file.parentNode.innerHTML;

のように、input要素を内包する要素内に含まれるHTMLテキストを、同一のHTMLテキストで上書きします。このようにすることでinput要素が再生成されます。そして新しく生成されたinput要素にはvalueの値は設定されていないため、結果としてvalueの値がクリアされることになります。Netlobo.com | Clear File Input Using Javascript

このときinput要素にイベントが登録されていると、それらも同時にクリアされます。よって再び登録し直す必要があります。

accept

受け入れ可能とするファイルのMIMEタイプを指示します。複数ある場合にはカンマで区切ります。

text/plain
audio/wav
audio/*

外観のカスタマイズ

外観を変更する方法はサポートされていないため、本来のinput要素をdisplay:noneで非表示にして、代替のインターフェイスを自作します。そしてそこからtype="file"の要素のclick()メソッドを呼び出すことで、機能はそのままで外観のみ変更できます。Web アプリケーションからファイルを扱う | MDN

<!-- 非表示にされたtype="file"要素 -->
<input type="file" id="file" style="display: none" />

<!-- 代替のインターフェイス-->
<input type="text" id="text" value="選択されていません" />
<input type="button" id="button" value="ファイルを開く" />

<script type="text/javascript">
    var file = document.getElementById( 'file' );
    var text = document.getElementById( 'text' );
    var button = document.getElementById( 'button' );

    file.onchange = function()
    {
        text.value = this.value;
    }

    text.onclick = button.onclick = function()
    {
        // type="file"要素のclickイベントを発生させる
        file.click();
    }
</script>

Internet Explorer 10より前では、この方法で設定されたファイルをform要素から送信できません。それを次に解説します。

Internet Explorer 10より前での問題

Internet Explorer 10より前では、代替のインターフェイスからファイルの選択はできますが、form要素からの送信に失敗します。

本物
代替

CSSで実現する方法

input要素をopacity:0で透明にして重ねることで、代替のインターフェイスをクリックしているように見せかけて、本来のinput要素をクリックさせます。

重ね合わせ前
本物
代替
↓
半透明
(重ね合わせイメージ)
↓
透明
※正確に重ねるには、CSSのwidthとheightで調整します。

positionで絶対位置として、同一の位置を指定し重ねます。そしてz-indexで、type='file'の要素が上側になるようにします。

<div class="filebox">
    <input type="file" class="file" />
    <div class="fakefile">
        <input type="text" />
        <input type="button" value="参照" />
    </div>
</div>

<style type="text/css">
.filebox {
    position: relative;
}
.file {
    position: absolute;
    right: 0;
    z-index: 2;
    opacity: 0;
    filter:alpha(opacity=0);
}
.fakefile {
    position: absolute;
    right: 0;
    z-index: 1;
}
</style>

参考

参考

関連ページ

JavaScriptのドキュメントから検索