HTML input[type=file]の機能をそのままでオリジナルデザインにする方法

ファイルを選択してアップロードする際にファイル名がテキストボックスに表示されますがそのまま表示するとまったく地味なデザインになってしまうのでこれをオリジナルデザインにしたいと思いググったところ多数のやり方が見つかりました
一部例

しかしどれもアップロードするファイルを選択するとファイル名だけでなくパスも一緒に表示されてしまうことに気づきました。
パスは表示されないオリジナルのinput[type=file]の作成方法ご存知の方宜しく御願いします。

行動規範の内容に同意します

回答4件

inout[type=file]から値を抽出する際に、JavaScriptで「最後のバックスラッシュ、もしくはスラッシュ以降」だけ取り出すようにすれば、ファイル名だけを拾えます。

html
1<input type="file" onchange="uv.style.display='inline-block'; uv.value = this.value.match(/[\/\\]([^\/\\]+)$/)[1];" />

もっとも、いろいろ考えだすとさらに複雑化するので、インラインで書かずにJavaScriptを立てたほうがいいと思います。

投稿2016/01/08 02:09

maisumakun

総合スコア145183

takato

2016/01/08 06:51

maisumakun様ありがとうございます。 JSファイル駆使してなんとか自己解決できました！

行動規範の内容に同意します

自己解決

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
6        <script type="text/javascript">
7        <!--
8            $(function () {
9                
10                $('#a').css({
11                    'position' : 'absolute',
12                    'top' : '-9999px'
13                }).change(function () {
14                    var val = $(this).val();
15                    var path = val.replace(/\\/g, '/');
16                    var match = path.lastIndexOf('/');
17                    $('#b').val(match !== -1 ? val.substring(match + 1) : val);
18                });
19                $('#b').bind('keyup, keydown, keypress', function () {
20                    return false;
21                });
22                $('#b, #c').click(function () {
23                    $('#a').trigger('click');
24                });
25                
26            });
27        -->
28        </script>
29    </head>
30    <body>
31        <input type="file" id="a" name="aa" accept="*/*" />
32        <input type="text" id="b" style="width:300px;" />
33        <button id="c">ファイルを選択する</button>
34    </body>
35</html>

HTMLですぐに確認できるようにしました。
butonにcssで指定してカラフルなボタンにすることもできます。テキストボックスも大きいのでファイル名が略されずに表示されます。
ホームページ作成などにお使いください。

投稿2016/01/08 06:55

takato

総合スコア148

オリジナルのinput[type=file]とおっしゃっていたので、htmlとcssで実装可能なものをお探しなのかなと思いましたが、おそらく上でyubaさんが回答されているようにhtmlとcssだけでは実装できないのではないかと思います。

投稿2016/01/08 02:05

yng13

総合スコア215

takato

2016/01/08 05:56

yng13様初めまして。 javascriptで消すしかないですよね・・・わざわざありあとうございます。

行動規範の内容に同意します

http://qiita.com/shimayu/items/605ecac3eeec50dd4f93
fileインプット要素は非表示にしてしまい、代わりのボタンを自前で用意します。
代わりのボタンは好きなデザインにできます。
代わりのボタンをクリックされたときにそのイベント拾って隠されているFileインプット要素を.click()するわけです。

投稿2016/01/08 02:03

yuba

総合スコア5568

takato

2016/01/08 05:55

yuba様コメントありがとうございます。早速試させていただいたところこれも「本物と異なる仕様」なのです。実際のinput[type=file]ですとファイルをアップロードしたさいパスは表示されずにファイル名のみ表示されるんです。ただリンク先だとパス+ファイル名なためやはり似て非なるものなんです… 結構落ちているソースってのはエンジニアの自己満足のものが多いですよね＾＾；

行動規範の内容に同意します

あなたの回答