href চিত্র লিঙ্ক ক্লিক ক্লিক করুন


180

আমি সাধারণ লিঙ্কগুলি তৈরি করি: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>ওয়েব অ্যাপে।

আমি যখন লিঙ্কটিতে ক্লিক করি তখন এটি একটি নতুন পৃষ্ঠায় ছবিটি প্রদর্শন করে। আপনি যদি ছবিটি সংরক্ষণ করতে চান, তবে আপনাকে এটিতে ডান ক্লিক করতে হবে এবং "হিসাবে সংরক্ষণ করুন" নির্বাচন করতে হবে

আমি এই আচরণটি চাই না, আমি লিঙ্কটি ক্লিক করার পরে একটি ডাউনলোড বক্স পপিং করতে চাই, কেবল এইচটিএমএল বা জাভাস্ক্রিপ্ট দিয়ে কি সম্ভব? কিভাবে?

যদি না অনুমান করি তবে আমাকে একটি ডাউনলোড.এফপি স্ক্রিপ্ট লিখতে হবে এবং প্যারামিটার হিসাবে ফাইলের নাম সহ এটি href এ কল করতে হবে ...?


এই পিএইচপি ক্লাসটি ব্যবহার করার এখানে একটি সহজ উপায়: টিউটোরিয়ালচিপ.
com/

উত্তর:


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 সমর্থিত নয় , তবে মডার্নিজার https://modernizr.com/download/?adownload-setclass ( নন-কোর সনাক্তকরণের অধীনে ) এর সমর্থন পরীক্ষা করতে আপনি ব্যবহার করতে পারেন ব্রাউজার


2
আপনার মন্তব্যের জন্য ধন্যবাদ, এটি জানা ভাল জিনিস। যদিও আপনার মডার্নজার দরকার, আমি এখন এটি আমার সমস্ত প্রকল্পে ব্যবহার করি তাই ... আমি আপনার উত্তরটিকে নতুন উত্তর হিসাবে গ্রহণ করব
পিয়ের

1
আমি মনে করি আপনি এখানে মডার্নিজারের ভূমিকা ভুল বুঝে থাকতে পারেন। সংক্ষেপে বলতে গেলে, এটা যে অনুপস্থিত কার্যকারিতা যোগ করে না ... এই উত্তরটি দেখুন: stackoverflow.com/questions/18681644/...
bravokiloecho

@ গৌরবমনরাল কি সমস্যা হতে পারে?
ফ্রান্সিসকো কোস্টা

1
@ গৌরবমনরাল: আইই এটি সমর্থন করে না, যেমনটি উত্তরে উল্লেখ করা হয়েছে। সরবরাহিত ক্যানিয়াস লিঙ্কটি দেখুন।
পেরিরিক্স

8
গুরুত্বপূর্ণ : downloadবৈশিষ্ট্যযুক্ত বৈশিষ্ট্য কেবল একই-উত্সের ইউআরএলগুলির জন্য কাজ করে । MDN ডক্স
cespon

59

চিত্র বা এইচটিএমএলের জন্য ডাউনলোড লিঙ্ক তৈরি করার সহজতম উপায়টি ডাউনলোডের বৈশিষ্ট্য নির্ধারণ করছে তবে এই সমাধানটি কেবলমাত্র আধুনিক ব্রাউজারগুলিতেই কাজ করে।

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

"মাইমেজ" ডাউনলোড করার ফাইলের একটি নাম। এক্সটেনশন স্বয়ংক্রিয়ভাবে যোগ করা হবে উদাহরণ এখানে


এটি কি উইন্ডোজ বার্তা বাক্সের জন্য কাজ করবে? আমি চেষ্টা করেছি, মনে হচ্ছে এটি কাজ করছে না, তবে সম্ভবত আমি কিছু ভুল করেছি ?!
Z77

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
সুরক্ষা সমস্যা আছে, "অ্যাপ্লিকেশন / ফোর্স ডাউনলোড" বিষয়বস্তুর ধরণ বন্ধ করা উচিত! যা সার্ভার পিএইচপি উত্স সহ যে কোনও কিছু ডাউনলোড করতে পারে!
চার্লসবি

3
@ চারলেসবি ঠিক আছে, এটি আপনাকে ডিরেক্টরি ট্র্যাভারসাল ব্যবহার করে সার্ভার থেকে যে কোনও কিছু ডাউনলোড করতে দেয়: <a href="download.php?file=../dbparams.inc>">Download</a>উদাহরণস্বরূপ। আরো এখানে তথ্য: en.wikipedia.org/wiki/Directory_traversal_attack
OrganicPanda

@ চার্লসবি: তারপরে সবচেয়ে নিরাপদ উপায় কী ... টিকযুক্ত উত্তর ছাড়া ??
হীরা ঠাকুর

3
সুরক্ষা সমস্যাটি পেতে, অনুরোধ থেকে নিখুঁত বা আপেক্ষিক পাথের তথ্য নেবেন না; কেবলমাত্র ফাইলের নাম পান। পাথটি স্ট্রিপ করুন, উদাহরণস্বরূপ path file = pathInfo ($ _ GET ['file']] ব্যবহার করুন এবং তারপরে known ফাইল ['বেসনেম'] দিয়ে কিছু পরিচিত পাথ যুক্ত করে পাথটি একত্রিত করুন various আপনার অনুরোধে, যা আপনি তারপর আপনার ডাউনলোড ফাংশনে আসল পথে মানচিত্র করুন
আলেকজান্ডার

1
অথবা আইডি, টোকেন, পাথ সম্পর্কের সাথে একটি সারণী তৈরি করুন, ইউআরএল থেকে টোকেন পান, ডাটাবেসে পাথটি পরীক্ষা করে সেই ফাইলটি ফেরত দিন। এটি আরও নিরাপদ হবে। তবে স্পষ্টতই আরও জটিল।
ফ্লিপ

10

না, তা নয়। ইনলাইন হওয়ার পরিবর্তে ফাইলটি সংযুক্তি হিসাবে সেট করতে কন্টেন্ট-ডিসপজিশন শিরোনাম প্রেরণের জন্য আপনার সার্ভারে কিছু দরকার হবে। আপনি যদিও এটি প্লেইন অ্যাপাচি কনফিগারেশন দিয়ে করতে পারেন।

আমি মোড_উরাইট ব্যবহার করে এটি করার একটি উদাহরণ পেয়েছি , যদিও আমি জানি একটি সহজ উপায় আছে।


6
আরে, আপনি বলেছেন: "যদিও আমি জানি একটি সহজ উপায় আছে" ... কোনটি? ^ _ ^
পিয়েরে

আমি যদি বিশদটি জানতে পারি তবে আমি সেগুলি পোস্ট করতাম। আমি এখনই এগুলিকে খুঁজে পাচ্ছি না এবং বিস্তৃত অনুসন্ধানে নিবেদনের মতো সময় নেই।
কোয়ান্টিন

1
এটি আপনার সহায়তার জন্য ধন্যবাদ। আমি সবেমাত্র একটি পিএইচপি পৃষ্ঠা তৈরি করেছি যা ডাউনলোড উত্পন্ন করে ...
পিয়েরে


7

এটা চেষ্টা কর...

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

5

কোনও ব্যবহারকারী হাইপারলিংকে ক্লিক করলে লক্ষ্য ডাউনলোড করা হবে তা নির্দিষ্ট করতে এইচটিএমএল ডাউনলোড বৈশিষ্ট্য ed

এই বৈশিষ্ট্যটি কেবলমাত্র 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>

আউটপুট :

চিত্র ডাউনলোড করুন >>

এইচটিএমএল 5 ডাউনলোড বা ক্রোম

চিত্র ডাউনলোড করুন >>


1
আরে, উত্তরের জন্য ধন্যবাদ। কিছু লোক ইতিমধ্যে এটি প্রস্তাব করেছিল তবে আমি মনে করি এটি এখনও সম্পূর্ণ সমর্থনযোগ্য নয়। অন্যদিকে, আপনার ডাউনলোড লিঙ্কটি সর্বশেষে ক্রোমে আমার জন্য কাজ করছে না
পিয়েরে

আরে পিয়েরি, এই <a href=" w3schools.com/images/myw3schoolsimage.jpg "ডাউনলোড> চিত্র ডাউনলোড করুন >> </a> ধন্যবাদ
রিজো

4

আপনি খাঁটি এইচটিএমএল / জাভাস্ক্রিপ্ট দিয়ে এটি করতে পারবেন না। এর কারণ আপনার কাছে একটি পৃথক ফাইল (চিত্র) পুনরুদ্ধার করার জন্য ওয়েবসভারের সাথে একটি পৃথক সংযোগ রয়েছে এবং একটি সাধারণ ওয়েবসার্ভার কনটেন্ট শিরোনাম সেট সহ ফাইলটি পরিবেশন করবে যাতে সামগ্রীর ধরণটি পড়ার ব্রাউজার সিদ্ধান্ত নিতে পারে যে এই ধরণের অভ্যন্তরীণভাবে পরিচালনা করা যায়।

অভ্যন্তরীণভাবে ব্রাউজারটি ফাইল পরিচালনা করতে না দেওয়ার উপায় হাইডারগুলি (পছন্দসই বিষয়বস্তু-স্বভাব বা বিষয়বস্তুর ধরণ) পরিবর্তন করা হয় যাতে ব্রাউজারটি অভ্যন্তরীণভাবে ফাইলটি হ্যান্ডেল করার চেষ্টা করবে না। আপনি হয় ওয়েবসার্ভারে একটি স্ক্রিপ্ট লিখে যা ডায়নামিকভাবে শিরোনাম সেট করে (অর্থাত্ ডাউনলোড.এফপি) বা আপনি যে ফাইলটি ডাউনলোড করতে চান তার জন্য ওয়েবসভারটি কনফিগার করে বিভিন্ন শিরোনাম ফেরত দিতে পারেন। আপনি ওয়েব সার্ভারে প্রতি ডিরেক্টরি ভিত্তিতে এটি করতে পারেন, যা আপনাকে কোনও পিএইচপি বা জাভাস্ক্রিপ্ট না লিখে দূরে সরে যেতে দেয় - কেবলমাত্র এক জায়গায় আপনার সমস্ত ডাউনলোড চিত্র রয়েছে।


1
না। বিষয়বস্তুর ধরণ সম্পর্কে মিথ্যা বলা এটি অর্জনের একমাত্র উপায় নয়। সামগ্রী-প্রদর্শন HTTP প্রতিক্রিয়া শিরোনাম দেখুন।
কুইন্টিন

4

পিএইচপি ব্যবহার করে একটি চিত্র ক্লিক করে চিত্র ডাউনলোডের জন্য সাধারণ কোড

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