下载一个带有ajax请求的图像


Download an image with an ajax request

我的PHP服务器上的uploads文件夹中有一些文件。我的问题如下:我想从我的客户端发送一个JSON异步请求,以便选择其中一个文件,并用它创建一个图像元素,以便在浏览器中显示它

JS代码

 var file_name="test.jpg";        
 $.ajax({
        method:"POST",
        dataType:"json",
        url:"retrieve_photo.php",
        data:{name:file_name},
        success: function(data) { 
           var new_thumb = document.createElement("img");
           document.getElementById('dragarea').appendChild(new_thumb);
          ...
        }
     })

PHP代码(retrieve_photo.PHP):

<?php  
  $ds = DIRECTORY_SEPARATOR;
  $storeFolder="uploads";
  $file_name=$_POST[name];
  $files = glob($storeFolder.$ds.$file_name);                
  if ( false!==$files ) {   
      ....
  }
  header('Content-type: text/json');            
  header('Content-type: application/json');
  echo json_encode($result);
?>

我不知道该写什么,因为$result以正确的方式馈送data。我试过

$result=readfile($storeFolder.$ds.$file_name);

但可能不正确。最后,我想使用data在浏览器中显示图像。

感谢

也许做这样的事情会更好?:

var image = new Image();
image.src = "blabla";
$(image).on('load', function(){
//do what you want
})

你为什么还要使用AJAX?也许我不明白)

由于您在PHP中不使用算法或函数,因此您可以通过Javascript/Jquery:完成所有操作

var img = $("<img />").attr('src', 'uploads/'+ file_name)
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined") {
            alert('Image not found');
        } else {
            $("#dragarea").append(img);
        }
    });

文件getElementByI('dragarea').appendChild(new_thumb);

М你是说?文件getElementById('dragarea').appendChild(new_thumb);

document.getElementById('dragarea').appendChild(new_thumb);

retrieve_photo.php 中尝试此操作

$filename = "test.jpg";
    //Make sure $filename contains the appropriate path of the photo
    $size = getimagesize($filename);
    $file = $filename;
    if ($size) {
        header("Content-type:". $size['mime']);
        header("Content-Length: " . filesize($file));
        header("Content-Disposition: attachment; filename=$filename");
        header('Content-Transfer-Encoding: base64');
        header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
        header("Content-Type: application/force-download");
        readfile($file);
        exit;
    }