【コピペでできる】jQueryだけで画像ダウンロードボタンを作る

webサービスなんかを作っていると、サイトにアップしている画像をダウンロードできるような機能をつけたりするシーンがあります。

以前、当サイトでも紹介した、

このローディングgif画像ダウンロードサービスサイトなんかもそうですね。

こういった、サイトに「ダウンロードボタン」を設置して、画像ダウンロードを可能にするような仕組みは、jQueryを使えば簡単に実装できます。

デモサイト

デモサイトへ

上下それぞれのダウンロードボタンを押すと、表示されている画像をダウンロードすることができます（全く必要のない画像だとは思いますが・・・）。

htmlソース記述例

  <div class="image_dl">
    <p><img src="画像1url" width="400"></p>
    <p class="downloadButton"><a href="画像1url">ダウンロード１</a></p>
  </div>

  <div class="image_dl">
    <p><img src="画像2url" width="400"></p>
    <p class="downloadButton"><a href="画像2url">ダウンロード2</a></p>
  </div>

div要素等は、何でも良いです。重要なのは、

    <p class="downloadButton"><a href="画像1url">ダウンロード１</a></p>

この部分ですね。
ダウンロードボタンのリンク先をダウンロードさせたい画像がアップロードされているurlを指定することです。

jQuery記述例

<script type="text/javascript">
$(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>

jQueryは、これでok。
あまり深く考えずに、コピペで良いんですが、ポイントは、

function(e)で、targetを取れるようにしていることと、$target.attrあたりですかね。

初心者のかたは、function(e)の”e”ってなんだって思うかもしれませんが、これについは、下記のサイトがわかりやすいので、ご参照を。

$target.attrは、属性を設定しているものですね。属性にdownloadを設定していますが、この辺りの話はくわしく解説していただいているサイトがありましたので、こちらもご参照を。


基本、コピペで活用できますね。
あと、今回、画像を二つ並べたので、「downloadButton」をclassにしていますが、一つとかだったらidにしても良いかもです。