inputに対してjqueryでclickしても効かない

Question

jqueryで
<input id="file" type="file" />
にたいして、
$("#file").click();
として、<input id="file" type="file" />を直接マウスでクリックしたときのような挙動を起こしたいのですが、そうなりません。（なにもおこりません）
このような例はネットを探せばよくありますが、マネしても効果がないです。

Comments

[A-pZ]

「効かない」→具体的に行いたい内容を記載しましょう。例えば type="file" と指定していないものに対しても、<input type="file">のように動かしたいのか、など。

Answer 1

<input id="file" type="file" /> のデザインが嫌だったので、画像を用意して。その画像をクリックしたら、<input id="file" type="file" />にjqueryをつかいクリックしようとおもいました。
<input id="file" type="file" />はcssでdisplay:none;にしています。

label要素を使って解決するのがスマートだと思います。

• [HTML5] <input type="file">のデザインをもっと簡単に変更 - Qiita

ただし、この方法には製作者スタイルシートを無効に設定しているブラウザでlabel要素内のコンテンツ、<input type="file"> の両方が出現してしまう問題があります。
質問者さんがやろうとしていう事でも同様の問題があります。

Re: teratailpeta さん

Answer 2

まず前提として
<input id="file" type="file" />
をクリックすればjavascript、jqueryを使わなくとも、ファイル選択ダイアログは開きます。

ただし、下記のようにクリックイベント時にイベントの伝搬をさせないようにreturn falseするとクリックしても開かなくなります。

$(function(){
	$("#file").click(function(){
		return false;
	});
});

そして、jqueryでマウスでクリックした時と同じ動作をという事ですが、例えばhtml部分に

<input type="file" id="file">
<button id='btnopen'>open</button>

というボタンを追加してこれをクリックした時にファイル選択ダイアログを開く（つまり<input type="file" id="file">をクリックした時と同じ処理をする事はできます）

$(function(){
    $("#btnopen").click(function(){
        $('#file').trigger("click");
    });
});

ようはjqueryで<input type="file" id="file">をクリックしたイベントを発生させているという事です。
ですのでマウスでクリックした時と同じ操作はできますが、以下のような処理は行わないでください。LOOPしてえらいことなりますから

$(function(){
	$("#file").click(function(){
		$(this).trigger("click");
	});
});

jqueryからファイル選択ダイアログを開くというのはようは<input type="file" id="file">をjqueryでクリックするという事になります。

しかしあまりそういう使い方はしないと思います、なぜなら<input type="file" id="file">自身がダイアログ開く機能をもっているから、なのでこういう使い方をするとしたらデザイン面で<input type="file" id="file">を使いたくない時に
<input type="file" id="file" style="display:none">などして非表示にしておいて、見た目の良いデザインのボタンなどを配置して上記のjqueryのように間接的にクリックするなどの使い方以外あまり思いつきません。

Comments

[退会済みユーザー]

解決しました。ありがとうございました！

[hiim]

他の回答者様へのコメントとかを見てこっちの事か？と気づき一応のせておきます。ユーザーが実際にクリックなどしたハンドラの中ではclick()発火する事はできるのですが、セキュリティのためかそれ以外では効かないようです。
jsのclick()のあたり参照
http://var.blog.jp/archives/44807272.html

ようは
$("#btn").click(function(){
$('#file').click();
});
はできても
$(document).ready(function(){
$('#file').click();
});
などはできないという事です。

Answer 3

$("#file")は要素で、clickして発火するものと推測します。
クリックしたらどうしたいのですか？
クリックが効かないと言われても・・

Comments

[退会済みユーザー]

ファイル一覧を開きたいんです。
<input type="file"/>
をマウスでクリックしたときと、同じ挙動になってほしいです。

[takepieee]

一つ質問なのですが、通常jsやjQueryを使わずとも
<input type="file">をクリックすればファイル一覧は開きますよね。
その挙動になっていない理由等はありますか？

[退会済みユーザー]

マウスでクリックをした場合できますが、jqueryから開くにはどうすればいいかが知りたいんです。

[takepieee]

？？
すみません、分からなくなってきました。
「マウスでクリックしたときと、同じ挙動になってほしいです。」と記載していらっしゃいますが、「マウスでクリックをした場合できますが、jqueryから開くにはどうすればいいかが知りたいんです」とはどういうことですか？

jQueryをどういう目的で使うのか、
- どの要素を（id="file"を）
- どういうイベントをした時に（クリックした時に）
- どういう処理を行うのか（input type="file"と同じようにファイル指定窓を開く）
を明確にしてください。出来ればその設置目的もお願いします。
上記カッコ内は今までの流れで書きましたが、これは上でも触れましたがJSもjQueryも不要です。

[退会済みユーザー]

<input id="file" type="file" /> のデザインが嫌だったので、画像を用意して。その画像をクリックしたら、<input id="file" type="file" />にjqueryをつかいクリックしようとおもいました。
<input id="file" type="file" />はcssでdisplay:none;にしています。

[takepieee]

納得しました。
やはりjQueryは不要ですよ。
labelタグで囲んでbackground: url(画像);で設定すればよろしいかと思います。

参考：
http://qiita.com/yasumodev/items/c9f8e8f588ded6b179c9

Answer 4

javascriptいらないと思いますけど

<input id="file" type="file" style="position:absolute;top:-999px" />
<label for="file">file</label>

Answer 5

$("#file").click(); は $("こいつが").クリックされたとき(これをします); だと思うんですが。
$("#file").click();をロードしたらFILEが開くとか目的だった場合クリックされてないので無理なのでは？

Comments

[退会済みユーザー]

（）の中がからの場合は、そうじゃなくなります!
http://logic-a.com/2014/02/09/jquery%E3%81%A6%E3%82%99a%E3%82%BF%E3%82%AF%E3%82%99%E3%81%AE%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95/