JavaScriptで画像をまとめて一括ダウンロードさせる方法!

WEBサイトやWEBアプリから複数ファイルの画像をクライアントにダウンロードさせたいと思ったことはないでしょうか?この記事ではJavaScriptで画像をまとめて一括ダウンロードする方法をサンプルコード付きで解説しています。

コンテンツ [表示]

  1. 1JavaScriptで画像をまとめて一括ダウンロードさせる方法

WEBサイトやWEBアプリからクライアントに画像をダウンロードさせる機能を実装させたいと思ったことはないでしょうか?

下記の記事でJavaScriptで画像をダウンロードさせる方法を解説していますので、是非参考にしてみてください。

あわせて読みたい
JavaScriptで画像をダウンロードさせる方法を解説!のイメージ
JavaScriptで画像をダウンロードさせる方法を解説!
WEBサイトなどのリンクやボタンから画像ファイルをダウンロードさせたいことがあります。JavaScriptを用いることでリンクやボタンをクリックした際、ローカルに画像をダウンロードさせるように実装することができます。この記事ではその方法について解説しています。

今回は複数の画像をダウンロードさせるときにまとめて一括で複数の画像をダウンロードさせる方法をサンプルコード付きで解説していきます。

JavaScriptで画像をまとめて一括ダウンロードさせる方法

それでは早速、画像をまとめて一括ダウンロードさせる方法を解説していきます。

画像ダウンロードボタンをクリックした際に定義したdownloadImgs関数を実行します。downloadImgs関数では実際にダウンロード処理を実行するdownloadImg関数の引数にファイル名を指定して、ファイルの数だけ実行します。

IEではaタグのdownload属性が使えないため、IE用とChromeなどのブラウザで条件分岐を行っています。

IE用の処理はmsSaveOrOpenBlobメソッドを使って画像のダウンロードを行います。

ChromeなどではcreateElementメソッドでaタグを生成し、ファイルのパスとファイル名を設定します。生成した要素をappendChildメソッドでbodyタグの末尾に追加し、clickメソッドで追加した要素をプログラムからクリックします。そうすることで、ファイルダウンロードを実行することができます。

処理が終了したら、追加した要素をremoveChildメソッドで削除します。

上記の処理をファイルの数だけ実行することで、複数ファイルをまとめて一括でダウンロードすることができます。

GeekHive採用サイト

関連記事