Question

我的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 Feed data的内容。我试过了

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

但可能不正确。至于我希望使用data来向我的浏览器显示图像。

谢谢

Answer 1

也许会做更好的事情吗？：

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

为什么你甚至使用AJAX？也许我不明白）

Answer 2

由于您不在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);
        }
    });

Answer 3

文档 getElementByI （ 'dragarea'）的appendChild（new_thumb）;

你是什么意思？。文件的的getElementById （ 'dragarea'）的appendChild（new_thumb）;

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

Answer 4

在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;
    }

使用ajax请求下载图像

4 个答案: