ブラヴィッシモのいろいろな記事

type=”file”を独自デザインにしてもIE9で選択ファイル名が表示されるJS

2016/8/17

こんにちは。creativeチームのBDS（ビール大好きS）です。

 

先日とある案件で困ったことがあり、開発チームに助けてもらって実装したJSをご紹介します。

 

何に困ったかというと、、、

「ファイル選択ボタン（type=”file”で実装）を独自のデザインにしたい」

というお客様からのご要望。

普通type=”file”ってデフォルトのまま使用するとこんな感じの見た目ですね。

 

それをこんな感じにしたい

faile02

ボタンのデザインを変更するのは大した作業ではないのですが、やっかいなのはその後でした。

type=”file”を独自デザインにするとまずそのままだと選択したファイル名が自動的に表示されない問題が起こりました。

私のどうにかできる範囲でないと判断し、開発チームにお願いしました。

パパッとJSを書いてファイル名も表示されるようにしてくれたのですが、、、
IE9だけ表示されず。。。

そして泣きのもう一回。
再度調整してもらい、やっとこさIE9でもファイル名が表示されるようになりました。

上がってきたソースがこれ

    // ファイル選択時に、input textにファイル名を表示
    $(document).on("change", "{input fileのセレクタ}", function () {
        var fileName = null;
        if(window.File && window.FileReader) {
            if ( this.files ) {
                fileName = this.files[0].name;
            }
        } else if ($(this).val()) {
            fileName = $(this).val().substr($(this).val().lastIndexOf("\\") + 1);
        }

        $("{input textのセレクタ}").val( fileName );
    } );

 

無事にファイル名表示されました.

開発チームに感謝。
ちなみにHTMLはこんな感じです。

<div>
    <input type="text" class="●●●" readonly/>
    <label class="×××">
    ファイル選択<input type="file" value="ファイル選択"/></label>
</div>

 

もし同じように苦しんでる方がいたら試してみてください。

Pocket
このエントリーをはてなブックマークに追加

カテゴリ：ブラヴィッシモのいろいろな記事

お問合せフォームへ

新着記事

人気記事

ブラヴィッシモTOP