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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

6901閲覧

ブラウザからドラッグ&ドロップでブラウザ外へファイルをダウンロードする方法

technodelic

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2020/08/18 10:37

前提・実現したいこと

各種ファイルのプレビュー画像をHTML5対応のブラウザで表示しています。
そのプレビュー画像をブラウザ外(デスクトップやフォルダ)にドラッグ&ドロップしたら、
ブラウザ外(デスクトップやフォルダ)にファイルがダウンロードされるようにしたいです。
(プレビュー画像のファイルではなく、プレビュー画像の元になったファイルそのものを
ダウンロードしたいです。)

その他、前提事項は次のとおりです。
・HTML5対応していないブラウザは使用しないため、考慮は不要です。
・JQueryは使用しない予定です。
・PHP version:7.4.7を使用しています。

発生している問題・エラーメッセージ

ブラウザ外へドラッグ&ドロップする機能のサンプルソースを探しましたが、まったく
見つけることができず、大変困っています。
(ブラウザ外からブラウザ内へとか、ブラウザ内のドラッグ&ドロップのサンプルは、
とても多く見つかるのですが、その逆のサンプルが見つけられません。)

試したこと

JavaScriptのドラッグ&ドロップイベントの発生順序は確認して把握していますが、
ブラウザ外へドロップした場合のondropイベントをどうすればリッスンできるのかが
わかりませんでした。

HTML5やJavaScriptは勉強中で不慣れなため、わかりにくい質問になっているかも
しれませんが、具体的なコードやサンプルの在り処やご存じでしたら、ぜひ、
ご教授いただければ幸いです。

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

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

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

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

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

guest

回答2

0

調べた限りでは、ドラッグ&ドロップでダウンロードする方法はChromeでしか対応していないようです。
以下の記事で具体的な方法が紹介されています。
ドラッグ&ドロップでChromeからデスクトップへファイルをダウンロードする方法

投稿2020/08/18 11:37

ex025

総合スコア179

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

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

technodelic

2020/08/19 01:29

Chiba_mさん、早速の回答ありがとうございます。 お返事が遅くなって恐縮です。 また、サンプルソースのご紹介ありがとうございます。 古い記事だったので、見逃していましたが、さっそく検証環境で 試してみたところ、dropイベントを使わないでもダウンロードが できることが確認できました。 なお、いくつかのブラウザで試してみたところ、以下の結果に なりました。 現状では、Chromiumベースのブラウザだと、機能するのかもしれません。 ご参考まで。  ブラウザ実行環境:Windows 10 Pro 64bit バージョン:1909 OSビルド:18363.1016   Chrome バージョン: 84.0.4147.125(Official Build) (64 ビット):ダウンロード可能   Microsoft Edge バージョン 44.18362.449.0(古いEdge):ダウンロード不可能   Microsoft Edge バージョン 84.0.522.61 (公式ビルド) (64 ビット)(Chromium版Edge):ダウンロード可能  ブラウザ実行環境:macOS Catalina 10.15.6   Chrome バージョン: 84.0.4147.125(Official Build) (64 ビット):ダウンロード可能   Safari バージョン:13.1.2(15609.3.5.1.3):ダウンロード不可能 今回はSafariでの実現も必要なため、Chromiumペース以外でも可能な方法がないか、継続して検討してみます。 それと、ご紹介いただいた記事は、古いせいか、リンクがほぼ切れていましたが、ダウンロード方法を比較的わかりやすく説明されている記事を見つけましたので、共有させていただきます。 http://var.blog.jp/archives/81624165.html こちらもご参考まで。
guest

0

自己解決

残念ながら、時間切れでSafariでもChroniumベースでも動作する方式を見つけることができませんでした。
今回は、Chroniumベースのブラウザのみで実現することにします。
ご協力ありがとうございました。

投稿2020/09/07 23:55

technodelic

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問