我生成正常的链接,如:<a href="/path/to/image"><img src="/path/to/image" /></a>在一个web应用程序。
<a href="/path/to/image"><img src="/path/to/image" /></a>
当我点击链接时,它会在一个新页面中显示图片。如果你想保存图片,你需要右键点击它,选择“另存为”
我不希望这种行为,我想有一个下载框弹出时,我点击链接,这是可能的只是与html或javascript?如何?
如果没有,我想我将不得不写一个下载。php脚本,并调用它到href与文件名作为参数…?
不,它不是。您将需要服务器上的某些东西来发送Content-Disposition头,以将文件设置为附件而不是内联文件。不过,您可以使用普通的Apache配置来实现这一点。
我找到了一个使用mod_rewrite的例子,尽管我知道有一个更简单的方法。
纯html/javascript是做不到的。这是因为你有一个单独的连接到web服务器来检索一个单独的文件(图像),一个正常的web服务器将提供设置了内容头的文件,以便读取内容类型的浏览器将决定该类型可以在内部处理。
强制浏览器不在内部处理该文件的方法是更改头文件(最好是content-disposition或content-type),这样浏览器就不会尝试在内部处理该文件。你可以通过在web服务器上写一个脚本来动态地设置头文件(例如:download.php),或者通过配置web服务器来为你想要下载的文件返回不同的头文件。你可以在web服务器的每个目录上这样做,这将允许你不写任何php或javascript -只需将所有下载的图像放在一个位置。
<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'); } ?>
为图像或html创建下载链接的最简单方法是设置下载属性,但此解决方案仅适用于现代浏览器。
<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>
"myimage"是要下载的文件名。扩展将自动添加 例子 < / p >
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName"> <img alt="ImageName" src="/path/to/image"> </a>
它还不完全支持caniuse,但你可以使用modernizr (在非核检测下)来检查浏览器的支持。
试试这个…
<a href="/path/to/image" download> <img src="/path/to/image" /> </a>
如果你使用HTML5,你可以添加属性“下载”到你的链接。
<a href="/test.pdf" download>
http://www.w3schools.com/tags/att_a_download.asp
我做了这个简单的代码!:)
<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>
<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>
属性指定当用户单击超链接时将下载目标。
该属性仅在设置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下载或chrome浏览器