Q&A
キャッシュの問題のように思えます。
obj.innerHTML = '<img width="100px" src="../code/mem/MemImageOne.php?memId=' + $('#memId').val() + '&memImageType=' + exten + '&dummy=123">';
などと、パラメータをつけてURLを別のものにするとどうですか？
フロント：javascript バックエンド：PHP
上記の組み合わせで画像を登録するアプリを制作中です。
流れとしては以下です。
１）ダイアログ画面を開いて、現在登録されている画像を表示します。
２）ダイアログ内でローカルファイルの画像を選択し、画面に表示します。
３）登録したい画像であることを確認したら、「更新」ボタンをクリックし、ajaxでDBを更新します。
４）更新後の新しい画像を表示します。
下のイメージはダイアログを開いて、ローカルファイルを選択したところです。
「更新」ボタンをクリックしたらワニの絵をサンタさんの換わりに表示させたいです。
下記はhtml部分（Bootstrap使用）と各処理を行うjavascriptです。
javascriptではvar と const が入り乱れてます。ご容赦ください。
PHP側は割愛しています。
１）の部分は問題なく表示されます。○
２）の部分もローカルファイル内から検索して画像表示できます。○
３）の部分のDB更新も正常に行われています。○
４）の再表示の部分が正常に稼働せず、古いままの画像が表示されたままです。×
キャッシュの問題だと考え、javascriptでキャッシュクリアみたいなことをやってみましたが、
うまくいきませんでした。
どなたかご指導ください。
よろしくお願い致します。
【html】
<!-- 【１】外観写真登録用 ダイアログ--> <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="label3" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="label1">外観写真</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div id="memImageCurrent"> // ここに現在登録されている外観画像が表示される </div> <dl class="memProfile"> <dl class="memProfile"> 登録する画像を選択してください。<br /> <input id="file-sample" type="file" class="form-control-file" /> <img id="file-preview"> </dl> </dl> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" onclick="imageRegist()">更新</button> </div> </div> </div> </div>
【Javascript】
→１） // 【メイン】「外観写真」クリック → 【１】外観写真登録用ダイアログを表示 function dialogOpenImage(){ var obj = document.getElementById("memImageCurrent"); obj.innerHTML = ''; obj.innerHTML = '<img width="100px" src="../code/mem/MemImageOne.php?memId=' + $('#memId').val() + '&memImageType=' + $('#memImageType').val() + '">'; } →２） // ファイル選択した画像を表示 $(function() { $('#file-sample').on('change', function(e) { // 1枚だけ表示する var file = e.target.files[0]; // ファイルのブラウザ上でのURLを取得する var blobUrl = window.URL.createObjectURL(file); // img要素に表示 $('#file-preview').attr('src', blobUrl); }); }); →３） // 【１】ダイアログ内 外観写真の更新 function imageRegist(){ let exten = ""; let image = ""; // 画像の有無判定 if($('#memImage').val() == ""){ alert("画像が選択されていません"); }else{ // ファイルの拡張子を取り出す const filename = $('#file-sample').val(); const pos = filename.lastIndexOf('.'); exten = filename.slice(pos + 1); image = $("#file-sample").prop('files')[0]; } // 画像を含む場合はこの方式 const data = new FormData(); data.append("memId", $.trim($('#memId').val())); data.append("memImageType", exten); data.append("memImage", image); // 追加登録Ajax処理 // 新たに追加されたIDを返す $.ajax({ type: "POST", url: "../code/mem/MemImageUpdate.php", data: data, dataType: false, processData: false, contentType: false, }).done(function(response) { // response は memId if(response != 0){ →４） // 再表示 let obj = document.getElementById("memImageCurrent"); obj.innerHTML = ''; obj.innerHTML = '<img width="100px" src="../code/mem/MemImageOne.php?memId=' + $('#memId').val() + '&memImageType=' + exten + '">'; }else{ alert("プロフィール画像が登録できませんでした。"); } }).fail(function(response) { alert('error－1!!!'); }); }
質問投稿わずか８分後に返答いただきました。
素早い対応ありがとうございます。
ご指摘のとおり、違うパラメータを渡したらすんなり再表示できました。
やっぱりキャッシュの問題だったのですね。
私は '&dummy=123" のところに
'&dummy=' + new Date() ととしてタイムスタンプを渡してみました。
これで続けて更新してもちゃんと再表示できました。
本当にありがとうございました。
ご解決されて何よりです。
自己解決のご対応をお願いします。
https://teratail.com/help#resolve-myself
回答1件
0
自己解決
スミマセン
自己解決したのに報告するのを忘れていました。
'&dummy=123" のところに
'&dummy=' + new Date() ととしてタイムスタンプを渡してみました。
これで続けて更新してもちゃんと再表示できました。
Lhankor_Mhy さんのヒントで解決できました。
Lhankor_Mhy さんにベストアンサーをつけるのはどうしたらいいのでしょうか？
投稿2020/06/19 01:46
総合スコア22
あなたの回答
tips
プレビュー
