クリックでhref画像リンクダウンロード

180

次のような通常のリンクを生成します：<a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>Webアプリで。

リンクをクリックすると、新しいページに画像が表示されます。画像を保存する場合は、画像を右クリックして[名前を付けて保存]を選択する必要があります

この動作をしたくないのですが、リンクをクリックしたときにダウンロードボックスが表示されるようにしたいのですが、それはhtmlまたはjavascriptだけで可能ですか？どうやって？

そうでない場合、download.phpスクリプトを記述して、ファイル名をパラメーターとしてhrefに呼び出す必要があると思います...？

html  image  download  href 
— ピエール
ソース
ここでは、このPHPクラスを使用して行うための簡単な方法は次のとおりです。tutorialchip.com/php-download-file-script
— VEN

回答:

239 
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

http://caniuse.com/#feat=downloadはまだ完全にはサポートされていませんが、modernizr https://modernizr.com/download/?adownload-setclasses（非コア検出の下）で使用して、サポートを確認できます。ブラウザ。

— フランシスココスタ
ソース
2
コメントをお寄せいただきありがとうございます。modernizrは必要ですが、今ではすべてのプロジェクトで使用しているので、新しい答えとして受け入れます
— Pierre
1
ここでは、Modernizrの役割を誤解しているかもしれません。要するに、それが欠けている機能を追加しません...この回答を参照してください。stackoverflow.com/questions/18681644/...
— bravokiloecho
@GauravManralどの継ぎ目が問題になるのですか？
— フランシスココスタ
1
@GauravManral：回答で述べたように、IEはそれをサポートしていません。提供されているcaniuseリンクを見てください。
— peirix 2015
8
重要：downloadattributte属性は、同じ生成元のURLでのみ機能します。MDNドキュメント
— cespon
59

画像またはHTMLのダウンロードリンクを作成する最も簡単な方法は、ダウンロード属性を設定することですが、このソリューションは最新のブラウザでのみ機能します。

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

「myimage」はダウンロードするファイルの名前です。拡張子は自動的に追加されます ここの例

— アレクセイ・サーチ
ソース
これはWindowsメッセージボックスで機能しますか？試してみたところうまくいかなかったようですが、何か間違ったことをしたのでしょうか？！
— Z77 2014
48 
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

download.php：

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>
— アミール
ソース
17
セキュリティの問題があり、「application / force-download」のContent-Typeを閉じる必要があります！サーバーのPHPソースを含む何でもダウンロードできます！
— CharlesB
3
@CharlesBは正しいです。これにより<a href="download.php?file=../dbparams.inc>">Download</a>、たとえば、ディレクトリトラバーサルを使用してサーバーから何かをダウンロードできます。詳細はこちら：en.wikipedia.org/wiki/Directory_traversal_attack
— OrganicPanda 2012
@CharlesB：次に、最も安全な方法は何ですか...チェックされた答えを除いて??
— HIRA THAKUR 2013
3
セキュリティの問題を回避するには、リクエストから絶対パス情報または相対パス情報を取得しないでください。ファイル名のみを取得します。$ file = pathInfo（$ _ GET ['file']を使用してパスを削除し、既知のパスに$ file ['basename']を追加してパスをアセンブルします。さまざまなフォルダーからファイルを提供する必要がある場合は、パストークンを使用しますリクエスト内で、ダウンロード関数の実際のパスにマッピングします
— Alexander233
1
または、Id、Token、Pathの関係を持つテーブルを作成し、URLからトークンを取得し、データベースのPathを確認して、そのファイルを返します。それはより安全でしょう。しかし、明らかにもっと複雑です。
— Felype、2015年
10

いいえ、そうではありません。インラインではなく添付ファイルとしてファイルを設定するには、Content-Dispositionヘッダーを送信するためにサーバー上で何かが必要になります。ただし、これは単純なApache構成で行うことができます。

mod_rewriteを使用してそれを行う例を見つけましたが、もっと簡単な方法があることは知っています。

— クエンティン
ソース
6
ねえ、あなたは言う： "私はもっと簡単な方法があることを知っていますが..." ... ^ _ ^
— ピエール
詳細がわかれば投稿します。現在、それらを見つけることができず、広範囲にわたる検索に専念する時間もありません。
— クエンティン
1
ご協力ありがとうございます。ダウンロードを生成するphpページを作成しました...
— Pierre
7

これを試して...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
— edCoder
ソース
5

HTMLダウンロード属性。ユーザーがハイパーリンクをクリックしたときにターゲットがダウンロードされることを指定します。

この属性は、href属性が設定されている場合にのみ使用されます。

属性の値は、ダウンロードされたファイルの名前になります。許可される値に制限はなく、ブラウザは自動的に正しいファイル拡張子を検出し、それをファイル（.img、.pdf、.txt、.htmlなど）に追加します。

コード例：

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>

HTML5：

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>

出力：

画像をダウンロード>>

HTML5ダウンロードまたはクロム

画像をダウンロード>>

— リゾ
ソース
1
ねえ、答えてくれてありがとう。一部の人々はすでにこれを提案しましたが、それはまだ完全にはサポートされていないと思います。一方、Chromeでは最新のダウンロードリンクが機能しません
— Pierre
ピエールさん、これを試してみてください<a href=" w3schools.com/images/myw3schoolsimage.jpg "download>画像のダウンロード>> </a>感謝
— Rizo
4

純粋なhtml / javascriptではできません。これは、別のファイル（画像）を取得するためにWebサーバーへの個別の接続があり、通常のWebサーバーがコンテンツヘッダーが設定されたファイルを提供するため、コンテンツタイプを読み取るブラウザーがタイプを内部的に処理できると判断するためです。

ブラウザーがファイルを内部で処理しないように強制する方法は、ヘッダー（コンテンツの配置またはコンテンツタイプ）を変更して、ブラウザーがファイルを内部で処理しないようにすることです。これを行うには、ヘッダーを動的に設定するスクリプト（つまり、download.php）をWebサーバー上で作成するか、ダウンロードするファイルに対して異なるヘッダーを返すようにWebサーバーを構成します。これは、Webサーバー上でディレクトリごとに行うことができます。これにより、phpやjavascriptを記述せずに離れることができます。すべてのダウンロード画像をその1つの場所に置くだけです。

— コリン・ピカード
ソース
1
いいえ。コンテンツタイプについて嘘をつくことは、これを実現する唯一の方法ではありません。content-disposition HTTP応答ヘッダーをご覧ください。
— クエンティン
4

PHPを使用して画像をクリックする画像ダウンロードのシンプルなコード

<html>
<head>
    <title> Download-Button </title>
</head>
<body>
    <p> Click the image ! You can download! </p>
    <?php
    $image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
    //echo $image;
    ?>
    <a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
        <img alt="logo" src="http://localhost/sc/img/logo.png">
    </a>
</body>
— サシュタ・マニック
ソース
2

画像クリックで画像ダウンロード！

私はこの簡単なコードをやった！:)

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>
— サシュタ・マニック
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.