title: Download an image with an ajax request
body: <p>I have some files on my PHP server inside <code>uploads</code> folder. My problem is the following: <em>I want to send a JSON asynchronous request from my client as to choose one of these files and create with this an image element as to display it in the browser</em>. </p>
  
  <p><strong>JS code</strong></p>
  
  <pre><code> 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);
            ...
          }
       })
  </code></pre>
  
  <p><strong>PHP code (retrieve_photo.php):</strong></p>
  
  <pre><code>&lt;?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);
  ?&gt;
  </code></pre>
  
  <p>I do not know what to write as <code>$result</code> feeds <code>data</code> the right way. I 've tried </p>
  
  <pre><code>$result=readfile($storeFolder.$ds.$file_name);
  </code></pre>
  
  <p>but maybe not correctly.As to conclude <strong>I want to use <code>data</code> as to display an image</strong> to my browser. </p>
  
  <p>Thank you</p>