jQueryで、ファイルアップロードフォームにファイルがセットされていた場合にボタンを表示させたい。

Question

よろしくお願いします。

jQueryで、ファイルアップロードフォームにファイルがセットされていた場合にボタンを表示させたいです。

環境は、
・windows8.1
・Apache2.2.14
・PHP 5.4.39
・jquery-1.11.2.min.js
です。
現状、表示させたいボタンには

.css("visibility","hidden");

こちらがかかっており、F12で確認できるソースにもしっかりとhiddenがかかっています。
ボタンは表示されていない状態です。(ここまでは良い。)

ここから、ファイルアップロードフォームにファイルがセットされていた場合に

.css("visibility","visible");

こちらを適用し、ボタンを表示させたいのですが、表示されません。

コードを記述します。

<input type="file" id="mainvisual_img_input" name="mainvisual_img">
<input type="button" id="main_visual_btn" value="画像変更" onclick="main_visual_btn()">

上記のHTMLは、Ajaxを使って表示させています。
ロードのタイミングなどに影響が出ているのでしょうか？

$(function(){
$('#mainvisual_img_input').on("change", function() {
		var file = this.files[0];
		// 画像変更ボタンの表示判定
		if(file != null) {
			$("#main_visual_btn").css("visibility","visible");
			alert("true");
		}else{
			$("#main_visual_btn").css("visibility","hidden");
			alert("false");
		}
	});

})

以下のサイト様を参考にさせて頂きました。

http://tomoyamkung.net/2014/01/09/javascript-uploadfile-selected/

functionの中にalertを記述しても反応しませんでした。
原因はどこにあるのでしょうか？

よろしくお願いします。

Answer 1

皆様回答ありがとうございました。

Ajaxで

<input type="file" id="mainvisual_img_input" name="mainvisual_img">

こちらを表示しているので、一緒にスクリプトもAjaxで送ってみたところしっかりと動きました。
理屈がよく分かっていないので、勉強したいと思います。

Answer 2

私の環境(chrome)で試した結果、問題なく動作しました。
開発者ツール等でデバッグしてみてはいかがでしょうか。

Comments

[退会済みユーザー]

回答ありがとうございます。
F12で～の下りは開発者ツールのことでした。(名前が分かりませんでした。)
私もchromeで実行しています。
なにか原因として考えられる事はあるでしょうか？
デバッグの結果は質問欄に記載してある通り、ファイルをセットしても
.css("visibility","hidden");
の状態から変化しないという状態です。

[orange0190]

fileの値をwatch式で確認しましたか?

[退会済みユーザー]

コメントありがとうございます。
watch式を調べていましたが理解できませんでした。

Answer 3

うーん…特に問題なさそうですが…
ちなみに1行目はこういう書き方してますか？

$(function() {
  ...(メインロジック）
});

もしやってなければ必須です。
$(function() { }); は HTMLのロードを待ってから内部の処理を実行という
jQueryを使った便利な書き方になります。

Comments

[退会済みユーザー]

回答ありがとうございます。
問題なくその記述をしています。
修正しておきます。