我生成正常的链接，如:<a href="/path/to/image"><img src="/path/to/image" /></a>在web应用程序。
当我点击链接时，它会在一个新页面中显示图片。如果你想保存图片，你需要右键点击它，选择“另存为”
我不希望这种行为，我想有一个下载框弹出时，我点击链接，这是可能的只是与html或javascript?如何?
如果没有，我想我将不得不写一个下载。php脚本，并调用它到href与文件名作为参数…?
不，它不是。您将需要服务器上的某些东西来发送Content-Disposition头，以将文件设置为附件而不是内联文件。不过，您可以使用普通的Apache配置来实现这一点。
我已经找到了一个使用mod_rewrite的例子，尽管我知道有一个更简单的方法。
纯html/javascript是做不到的。这是因为你有一个单独的连接到web服务器来检索一个单独的文件(图像)，一个正常的web服务器将提供设置了内容头的文件，以便读取内容类型的浏览器将决定该类型可以在内部处理。
The way to force the browser not to handle the file internally is to change the headers (content-disposition prefereably, or content-type) so the browser will not try to handle the file internally. You can either do this by writing a script on the webserver that dynamically sets the headers (i.e. download.php) or by configuring the webserver to return different headers for the file you want to download. You can do this on a per-directory basis on the webserver, which would allow you to get away without writing any php or javascript - simply have all your download images in that one location.
<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”是要下载的文件名称。扩展将自动添加 例子
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
<img alt="ImageName" src="/path/to/image">
</a>
caniuse还不完全支持，但可以使用modernizr(在非核心检测下)来检查浏览器的支持。
如果你使用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>
简单的代码图像下载与图像点击使用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>
属性指定当用户单击超链接时将下载目标。
该属性仅在设置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浏览器
下载镜像>>
推荐文章
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 是否有一个链接到GitHub下载文件的最新版本的存储库?
- 在HTML中还有其他有用的空格码吗，比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
- Angular 2模板中的标签是什么意思?
- 如何设置身体高度溢出滚动
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
