क्लिक पर href छवि लिंक डाउनलोड करें

Question

मैं सामान्य लिंक उत्पन्न करता हूं जैसे: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>एक वेब ऐप में।

जब मैं लिंक पर क्लिक करता हूं, तो यह एक नए पृष्ठ में चित्र प्रदर्शित करता है। यदि आप चित्र को सहेजना चाहते हैं, तो आपको उस पर राइट क्लिक करना होगा और "save as" चुनें

मुझे यह व्यवहार नहीं चाहिए, मैं लिंक पर क्लिक करने पर एक डाउनलोड बॉक्स पॉपिंग करना चाहूंगा, क्या यह केवल html या जावास्क्रिप्ट के साथ संभव है? कैसे?

अगर मुझे नहीं लगता कि मुझे एक डाउनलोड। स्क्रिप्ट लिखना होगा और इसे पैरामीटर के रूप में फ़ाइल नाम के साथ href में कॉल करना होगा ...?

Comments

इस PHP वर्ग का उपयोग करने का एक आसान तरीका यहाँ दिया गया है: tutorialchip.com/php-download-file-script

— ven

Answer 1

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

यह अभी तक http://caniuse.com/#feat=download का पूरी तरह से समर्थित नहीं है , लेकिन आप इसके समर्थन की जांच करने के लिए आधुनिकीकरण https://modernizr.com/download/?adownload-setclasses ( नॉन-कोर डिटेक्शंस के तहत ) का उपयोग कर सकते हैं ब्राउज़र।

Comments

आपकी टिप्पणी के लिए धन्यवाद, यह जानना अच्छी बात है। यद्यपि आपको आधुनिकता की आवश्यकता है, मैं अब इसे अपनी सभी परियोजनाओं में उपयोग करता हूं ... मैं आपके उत्तर को नए उत्तर के रूप में स्वीकार करूंगा

— पियरे

मुझे लगता है कि आपने यहां मॉडर्निज़र की भूमिका को गलत समझा होगा। संक्षेप में, यह उस कार्यक्षमता को नहीं जोड़ता है जो गायब है ... इस उत्तर को देखें: stackoverflow.com/questions/18681644/…

— bravokiloecho

@ गौरव मनराल को क्या समस्या है?

— फ्रांसिस्को कोस्टा

@ गौरव मनराल: IE इसका समर्थन नहीं करता, जैसा कि उत्तर में बताया गया है। प्रदान की गई लिंक को देखें

— Peirix

महत्वपूर्ण : downloadएट्रिब्यूट विशेषता केवल उसी-मूल URL के लिए काम करती है ।

— एमडीएन

Answer 2

छवि या HTML के लिए डाउनलोड लिंक बनाने का सबसे आसान तरीका डाउनलोड विशेषता है , लेकिन यह समाधान केवल आधुनिक ब्राउज़रों में काम करता है।

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

"myimage" डाउनलोड करने के लिए फ़ाइल का एक नाम है। एक्सटेंशन स्वचालित रूप से जोड़ा जाएगा उदाहरण यहां

Comments

क्या यह विंडोज मैसेज बॉक्स के लिए काम करेगा? मैंने कोशिश की, यह काम नहीं कर रहा है, लेकिन शायद मैंने कुछ गलत किया है ?!

— Z77

Answer 3

<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');

}
?>

Comments

एक सुरक्षा समस्या है, "एप्लीकेशन / फोर्स-डाउनलोड" सामग्री-प्रकार को बंद कर देना चाहिए! जो सर्वर PHP स्रोत सहित कुछ भी डाउनलोड कर सकता है!

— चार्ल्सबी

@CharlesB सही है, यह आपको निर्देशिका ट्रैवर्सल का उपयोग करके सर्वर से कुछ भी डाउनलोड करने की अनुमति देगा: <a href="download.php?file=../dbparams.inc>">Download</a>उदाहरण के लिए। अधिक जानकारी यहाँ: en.wikipedia.org/wiki/Directory_traversal_attack

— OrganicPanda

@CharlesB: उसके बाद सबसे सुरक्षित तरीका क्या है ... सिवाय गुदगुदी जवाब के ??

— HIRA THAKUR

सुरक्षा समस्या के आसपास जाने के लिए, अनुरोध से पूर्ण या सापेक्ष पथ की जानकारी न लें; केवल फ़ाइल नाम प्राप्त करें। पथ को स्ट्रिप करें, जैसे $ फ़ाइल = pathInfo ($ _ GET ['फ़ाइल') का उपयोग करना और फिर $ फ़ाइल ['basename'] के साथ कुछ ज्ञात पथ को जोड़कर पथ को इकट्ठा करना। यदि आपको विभिन्न फ़ोल्डरों से फ़ाइलें प्रदान करने की आवश्यकता है, तो पथ टोकन का उपयोग करें। आपके अनुरोध में, जिसे आप अपने डाउनलोड फ़ंक्शन में वास्तविक पथ पर ले जाते हैं।

— अलेक्जेंडर

या आईडी, टोकन, पथ संबंध के साथ एक तालिका बनाएं, URL से टोकन प्राप्त करें, डेटाबेस में पथ की जांच करें और उस फ़ाइल को वापस करें। यह सुरक्षित होगा। लेकिन स्पष्ट रूप से अधिक जटिल है।

— 28

Answer 4

नहीं, यह नहीं है। फ़ाइल इनलाइन होने के बजाय अनुलग्नक के रूप में फ़ाइल सेट करने के लिए आपको सामग्री-विवाद शीर्ष लेख भेजने के लिए सर्वर पर कुछ की आवश्यकता होगी। आप सादे अपाचे विन्यास के साथ ऐसा कर सकते हैं।

मुझे mod_rewrite का उपयोग करके ऐसा करने का एक उदाहरण मिला है , हालांकि मुझे पता है कि एक सरल तरीका है।

Comments

अरे, आप कहते हैं: "हालांकि मुझे पता है कि एक सरल तरीका है" ... कौन सा? ^ _ ^

— पियरे

यदि मुझे विवरण मिल जाता, तो मैं उन्हें पोस्ट करता। मैं उन्हें अभी नहीं ढूँढ सकता और व्यापक खोज के लिए समर्पित करने का समय नहीं है।

— क्वेंटिन

यह आपकी मदद के लिए ठीक है धन्यवाद। मैंने अभी एक php पेज बनाया है जो डाउनलोड को जनरेट करता है ...

— पियरे

Answer 5

यदि आप HTML5 का उपयोग कर रहे हैं, तो आप अपने लिंक में विशेषता 'डाउनलोड' जोड़ सकते हैं।

<a href="/test.pdf" download>

http://www.w3schools.com/tags/att_a_download.asp

Answer 6

इसे इस्तेमाल करे...

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

Answer 7

एचटीएमएल डाउनलोड विशेषता यह निर्दिष्ट करने के लिए कि जब हाइपरलिंक पर एक उपयोगकर्ता क्लिक करता है तो लक्ष्य डाउनलोड किया जाएगा।

यह विशेषता केवल तभी उपयोग की जाती है यदि href विशेषता सेट हो।

विशेषता का मूल्य डाउनलोड की गई फ़ाइल का नाम होगा। अनुमत मानों पर कोई प्रतिबंध नहीं है, और ब्राउज़र स्वचालित रूप से सही फ़ाइल एक्सटेंशन का पता लगाएगा और इसे फ़ाइल (.img, .pdf, .txt, .html, आदि) में जोड़ देगा।

उदाहरण कोड:

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

एचटीएमएल 5:

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

आउटपुट :

डाउनलोड छवि >>

Html5 डाउनलोड या क्रोम

डाउनलोड छवि >>

Comments

हे, उत्तर के लिए धन्यवाद। कुछ लोगों ने पहले ही इसका प्रस्ताव रखा था लेकिन मुझे लगता है कि यह अभी भी पूरी तरह से समर्थित नहीं है। दूसरी ओर, आपका नवीनतम लिंक क्रोम पर नवीनतम

— पियरे

हे पियरे, इस <a href=" w3schools.com/images/myw3schoolsimage.jpg "डाउनलोड करें> डाउनलोड करें छवि डाउनलोड करें >> </a> धन्यवाद

— रिज़ो

Answer 8

आप इसे शुद्ध html / जावास्क्रिप्ट के साथ नहीं कर सकते। ऐसा इसलिए है क्योंकि आपके पास एक अलग फ़ाइल (छवि) प्राप्त करने के लिए वेबसर्वर का एक अलग कनेक्शन है और एक सामान्य वेबसर्वर सामग्री हेडर सेट के साथ फ़ाइल की सेवा करेगा ताकि सामग्री प्रकार पढ़ने वाला ब्राउज़र तय करेगा कि प्रकार आंतरिक रूप से नियंत्रित किया जा सकता है।

ब्राउज़र को आंतरिक रूप से हैंडल नहीं करने के लिए बाध्य करने का तरीका हैडर्स (सामग्री-वितरण को अधिमानतः, या सामग्री-प्रकार) को बदलना है, इसलिए ब्राउज़र आंतरिक रूप से फ़ाइल को संभालने की कोशिश नहीं करेगा। आप या तो वेबसर्वर पर एक स्क्रिप्ट लिखकर ऐसा कर सकते हैं, जो डायनामिक रूप से हेडर सेट करता है (यानी download.php) या जिस फाइल को आप डाउनलोड करना चाहते हैं, उसके लिए अलग हेडर वापस करने के लिए वेबसर्वर कॉन्फ़िगर करके। आप वेबसर्वर पर प्रति-निर्देशिका के आधार पर ऐसा कर सकते हैं, जो आपको किसी भी php या जावास्क्रिप्ट को लिखे बिना दूर जाने की अनुमति देगा - बस उस एक स्थान पर आपके सभी डाउनलोड चित्र हैं।

Comments

सामग्री-प्रकार के बारे में झूठ बोलना ही इसे प्राप्त करने का एकमात्र तरीका नहीं है। सामग्री-वितरण HTTP प्रतिक्रिया हेडर देखें।

— क्वेंटिन

Answer 9

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>

Answer 10

छवि क्लिक का उपयोग करके छवि डाउनलोड!

मैंने यह सरल कोड किया था: :)

<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>