質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2442閲覧

jqueryによる画像ダウンロード

u-sukesan

総合スコア156

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/11/20 07:20

編集2018/11/20 11:33

画像のダウンロードボタンの実装を検討しています。
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属性を付けて②の動作を制御できればいいのですが、難しそうでしたので上記のコードで検討しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

colling

2018/11/20 07:44

こちらでは質問のコードのままで画像ダウンロードができていますが、デベロッパーツールでエラー内容の確認ができますか?
Takumiboo

2018/11/20 07:47

「ダウンロード時にアラート」とはどういったものでしょう
x_x

2018/11/20 08:36

download属性については昨年から挙動が変わっているのですが、サーバーを立ててテストしていますか?
colling

2018/11/20 13:07

もしかして、PCのchrome,safariはダウンロードできるが、iPhoneのsafariでダウンロードできないという症状でしょうか?
u-sukesan

2018/11/20 13:20

colling様 いえ、PC、chrome,safariでの症状です。
colling

2018/11/20 13:24

そうですか、iOS safariがダウンロードできないのは仕様なのですが、こちらPCのchromeもSafariも正常動作しています。 $target.attr({ の直前でconsole.log()で変数を全部チェックしてみてください。
u-sukesan

2018/11/20 13:25

colling様 ありがとうございます。iOSはどうにもならないですね。またご指摘の箇所チェックしてみます。ありがとうございました。
colling

2018/11/20 13:27

はい。iOSはphpに変えてもダウンロードはしてくれないです(> <
guest

回答2

0

自己解決

jqueryでのダウンロード(download属性)による画像ダウンロードを諦め
PHPでのダウンロードに切り替えました。

ajaxでファイルURLをダウンロード用PHPプログラムに飛ばして
header()
readfile()
にてダウンロードする仕様にしました。

ご協力ありがとうございました。

投稿2018/11/20 13:23

編集2018/11/20 13:24
u-sukesan

総合スコア156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こちらでは、質問のコードで画像が問題なくダウンロードされます。

画像が新しいページで開くだけでダウンロードになりません。ということですので、jQueryが動いていないような気がします。

<script src="js/jquery-1.12.4.min.js"></script>のパスはあっていますか?

投稿2018/11/20 07:53

colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

u-sukesan

2018/11/20 11:17

ありがとうございます。試しに$('.downloadButton a').on('click', function(e){ の直後にalert('ok')を記述して実行しましたが、alertは表示されましたのでjqueryは動いていると思われます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問