php - 使用ajax调用从服务器文件夹下载图像

Question

我的网站在大多数情况下都使用ajax。我已经允许用户通过ajax上传图像。当用户单击按钮时，图像将通过 ajax 调用以模式显示。

现在，我希望用户通过单击图像开始下载，而不关闭模式或刷新。我确实尝试过使用 href 。它工作正常，但正如我提到的，我希望让用户在模式打开的同一页面上。

到目前为止我尝试过的代码是:

$(document).ready(function(){
    var imgname;
    imgname = '';
    $("#modalimage").click(function(){
        imgname = $("#downloadimg").val();
        downloadImage(imgname);
    })
})

function downloadImage(imagename){
    $.ajax({
            type : "POST",
            url : "download.php",
            data : { imagename : imagename } ,
            success : function(response){
                alert('success');
            }
    })
}

download.php代码是:

if ( isset($_POST['imagename']) ) {
    $filename = $_POST['imagename'];
    $filepath = 'images/'.$filename;
}
echo $filepath;
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=' . basename($filepath));
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($filepath));
readfile($filepath);

这里的问题是，当 ajax 调用 download.php 时，它会以一些二进制代码和小图像代码的形式创建响应，而不启动下载。是否可以通过ajax调用下载图像？

Answer 1

不要通过 ajax 调用它，而是放置此链接:

<a href="download.php?imagename=<?php echo urldecode($imagename); ?>">
    Clich here to download
</a>

其中 $imagename 是文件路径。链接内容可以是文本或缩略图或任何您想要的内容。

只需更改 download.php 代码以通过 $_GET 而不是 $_POST 获取图像，重要的是，删除其中的回显，除了 header 和文件内容:

if ( isset($_GET['imagename']) ) {
    $filename = $_GET['imagename'];
    $filepath = 'images/'.$filename;
}
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=' . basename($filepath));
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($filepath));
readfile($filepath);

您不会被重定向到该文件，并且该文件将会被下载。为此不需要 ajax。

如果您确实更喜欢使用 JavaScript，您可以动态地创建链接:

$(document).ready(function(){
    $("#modalimage").click(function(){
        var imgname = $("#downloadimg").val();
        var link = document.createElement("a");
        link.download = name;
        link.href = 'download.php?imagename=' + encodeURI(imgname);
        link.click();
    });
})