画像のダウンロードボタンの実装を検討しています。
PCとスマホどちらも実現できるといいのですが
主にchromeやsafari
download属性でもいいのですが、ダウンロード時にアラートを出したいので
jqueryやjavascriptでの実装を考えています。
あるサイトで見つけたjqueryによる画像ダウンロードの方法を
下記のように設定しました。
しかし、画像が新しいページで開くだけでダウンロードになりません。
記事が古かったので、ブラウザやjqueryのバージョンなど関係あるのでしょうか?
<script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $('.downloadButton a').on('click', function(e){ var hrefPath = $(this).attr('href'); var fileName = $(this).attr('href').replace(/\/g,'/').replace( /.*//, '' ); $target = $(e.target); $target.attr({ download: fileName, href: hrefPath }); }); }); </script> <p><img src="img/001.png" width="400"></p> <p class="downloadButton"><a href="img/001.png">ダウンロード1</a></p>
いくつか質問がありましたので、補足いたします。
①デベロッパーツールでエラーについて、エラーは何も出ていません。
②「ダウンロード時にアラート」とは、例えばダウンロードボタンを押したら、ダウンロードを開始する前にアラートを出したいのです。OKを押したらダウンロードされる流れです。
③サーバーはレンタルサーバー上でテストしています。download属性(直書き)を使わない方法で使わない方法で考えています。download属性を付けて②の動作を制御できればいいのですが、難しそうでしたので上記のコードで検討しています。
回答2件
あなたの回答
tips
プレビュー