質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

6095閲覧

【jquery】changeイベントで値が変更しない場合を検知することは可能でしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/02/01 00:50

編集2018/02/01 01:06

##わからないこと
いつもお世話になっております。
今回changeイベントを使い、値が変更しない場合を検知したいのですが、そもそもそれは可能でしょうか?

##やりたいこと
ファイルのアップロード時にchangeで検知しているのですが、同一ファイルでは値が同じためアップがされません(されないままで大丈夫です)。
その場合にアラートを出したいのですが、その方法について伺いたいです。

javascript

1$('#uploadCvPc').on('change', function(event){ 2 // すでにアップロードされた画像枚数 3 var cnt = $('.cv-file-pc img').length; 4 lastCnt = cnt; 5 var $input = $(this); 6 var files = event.target.files; 7 $li = $input.closest('.each_file'); 8 for (var i = 0, f; f = files[i]; i++) { 9 cnt += i; 10 // アップロード可能枚数の制限 11 if(cnt === 20) { 12 alert('可能な選択枚数を超えています。(20枚まで選択できます。)'); 13 return false; 14 } 15 // 一件ずつアップロード 16 (function(f){ // スコープを分離→変数fileName/filetimeをFileオブジェクトごとに用意する 17 imageFileUpload(f); 18 // entrant_id取得 19 var id = $("#id").val(); 20 var fileName = f.name; 21 var filetime = f.lastModified; 22 var imgUrl = '{!!url("/img/career_paper/cv/' + id + '/' + fileName + '")!!}'; 23 var imgLink = '{!!url("/img/career_paper/cv/' + id + '")!!}'; 24 var reader = new FileReader; 25 reader.readAsDataURL(f); 26 reader.onloadend = function(){ 27 ext = f.name.split(".").pop(); // ファイル拡張子取得 28 linkUrl = imgLink + '/' + filetime + '.' + ext; 29 var fileReader = this; 30 // 画像以外の拡張子の場合アイコンを表示 31 if(ext === 'pdf') { // pdfファイル 32 fileUrl = '{!!url("/img/portal/pdfIcon.jpeg")!!}'; 33 } else if(ext === 'csv' || ext === 'xls' || ext === 'xlsx' || ext === 'xlsm') { // エクセルファイル 34 fileUrl = '{!!url("/img/portal/excelIcon.jpg")!!}'; 35 } else if(ext === 'zip') { // zipファイル 36 fileUrl = '{!!url("/img/portal/zipIcon.jpeg")!!}'; 37 } else if(ext === 'pptx'){ 38 fileUrl = '{!!url("/img/portal/powerpointIcon.jpg")!!}'; 39 } else if(ext === 'doc' || ext === 'docx'){ 40 fileUrl = '{!!url("/img/portal/wordIcon.jpg")!!}'; 41 } else if(ext === 'jpg' || ext === 'JPG' || ext === 'jpeg' || ext === 'png' || ext === 'bmp' || ext === 'gif'){ 42 fileUrl = fileReader.result; 43 } 44 if(fileUrl){ 45 var thumb = '<div style="margin: 15px 10px 0 10px;width:200px;float: left;" class="cv-file-pc box"><a href="' + linkUrl + '" target=”_blank”><img src="' + fileUrl + '" width="200px" height="210px" style="max-width: 200px; max-height: 210px;height: -webkit-fill-available;margin-top:5px;" alt="'+ i +'"><input type="hidden" name="id" value="{{request()->input('id')}}"><input type="hidden" name="filename" value="' + imgUrl + '"><input type="hidden" name="filetime" value="' + filetime + '"></a><span style="width: 70px; height: 19px; text-align: center; margin-top: 5px;margin: 0 auto;float: right;cursor : pointer;" class="delete_btn bt-photo02 ui-bt-nomal ui-opaimg">削除</span></div>'; 46 $li.append(thumb); 47 } else { 48 alert('ファイルのタイプが適切ではありません。'); 49 } 50 }; 51 })(f); 52 } 53 // 追加アップロード分を合わせて枚数をカウント 54 sum = lastCnt + i; 55 $('#inputFiletext').text('経歴書 ' + sum + '枚 選択中'); 56 }); 57

html

1<label style="text-align: center; width: 150px; margin: 0 auto; padding: 10px;" class="bt-photo02 ui-bt-nomal ui-opaimg">経歴書を添付する 2 <input type="file" id="uploadCvPc" class="input_file" name="img_file[]" value="経歴書をアップロード" style="display:none;" multiple> 3 <input type="hidden" id="id"name="id" value="{{request()->input('id')}}"> 4 </label>

ご教授いただければ幸いです。

よろしくお願いいたします

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

unz.hori

2018/02/01 00:56

何がやりたいのかが良くわかりません。changeイベントは変更があった時に発生するイベントではないですか?
LineOfLightning

2018/02/01 01:04

ユーザーがどんな操作をした時にその操作を検知したいのかを具体的な操作例を提示してください。
退会済みユーザー

退会済みユーザー

2018/02/01 01:06

失礼いたしました。「やりたいこと」の欄を追記しましたのでご確認いただけますでしょうか。
unz.hori

2018/02/01 01:29

「値が同じため」とはファイル名が同一のためということでしょうか?スクリプトを追っていってそれが判定されるところでアップロードしない場合にメッセージを出せばいい気がしますが...
guest

回答2

0

ベストアンサー

#uploadCvPcのchangeイベント内で#uploadCvPcを消して作り直せば毎回リセット可能だと思います。前回のアップロードしたファイル名をどこかに保存しておけばアラートも出せます。

投稿2018/02/01 01:58

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/01 02:13

ご回答ありがとうございます。 アラートを出すようにする場合どのように記載すればよいでしょうか? イメージがわいておりません・・・
kei344

2018/02/01 02:19

どの部分がわからないのでしょうか。 $('#uploadCvPc').on('change' の外に変数を置いて、そこに直近のファイルを置いておいてファイル名等比較すればよいのでは?
退会済みユーザー

退会済みユーザー

2018/02/01 02:25

forループをchangeイベント内に記述しているのですが、changeの外に書くとなると、別途ループ処理を書くことになるのでしょうか?
kei344

2018/02/01 02:30

複数ファイル名が必要なら配列で保存しておけば良いでしょう。
guest

0

同じファイルを選んだ場合の挙動はchangeを発火したりしなかったり
ブラウザによってまちまちのようです。
どうしてもというのであればclick時に一度valueを別にとっておいて
value自体を消してしまうやり方が考えられますが
ファイル選択ダイアログでキャンセルしてもデータは消えたままなので
良し悪しだと思います

javascript

1$(function(){ 2 $('[type=file]').on({ 3 'click':function(){ 4 $(this).data("val",$(this).val()); 5 $(this).val(''); 6 }, 7 'change':function(){ 8 if($(this).data("val")==$(this).val()){ 9 alert("同じファイル"); 10 } 11 }, 12 }); 13});

HTML

1<input type="file">

投稿2018/02/01 01:41

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問