загрузить изображение из папки сервера с помощью вызова 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 вызывает вызов для загрузки. php создает ответ в виде некоторых двоичных кодов и небольшого изображения коды без начала загрузки. Можно ли загрузить изображение по телефону ajax?

Answer 1

Вместо вызова по ajax поместите эту ссылку:

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

, где $ imagename - путь к файлу. И содержание ссылки может быть текстом или миниатюрой или чем угодно.

И просто измените код загрузки. php, чтобы получить изображение через $ _GET, а не $ _POST и, что важно, удалите эхо, которое там есть , не должно быть никакого другого содержимого, кроме заголовков и содержимого файла:

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();
    });
})