勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

javascriptやjQueryで画像を書き換えても変わらない場合

   2024/02/28  jQuery JavaScript

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、ブラウザによっては同じ画像が表示されるという現象が発生していた。キャッシュが原因のようで画像URLにタイムスタンプを付与することで解決できた。以下に対応方法をメモ。

 

ソースコード

var timestamp = new Date().getTime();
$('#img-id').attr('src', $('#img-id').attr('src')+'?'+timestamp);

timestamp部分はJavaScriptで取得しているがjQueryの場合は以下でも取得できる。

var timestamp = jQuery.now();

 

リファレンス

https://api.jquery.com/jQuery.now/

 

PHPでタイムスタンプを付けたい場合

imgタグのsrc属性のURLにPHPでタイムスタンプを付与しキャッシュ対策する方法

 - jQuery JavaScript

  関連記事

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...