How to display images from FTP server on HTML page

问题:

This question already has an answer here:

• Retrieve image from FTP to webpage 3 answers

I try to build an image gallery for display images from FTP server. FTP server requires password authentication. I am scan files successful, but image don't display on page and by clicking on reference page ask user name and password.

$content = '';
$ftp_server = "255.122.111.111";
$ftp_user = "user_name";
$ftp_pass = "password";

$conn_id = ftp_connect($ftp_server) or die("Couldn't connect to $ftp_server"); 

if (@ftp_login($conn_id, $ftp_user, $ftp_pass)) {
    $content .= "<br />Connected as $ftp_user@$ftp_server\n";
} else {
    $content .= "<br />Couldn't connect as $ftp_user\n";
}

$files = ftp_nlist($conn_id, $dir);
foreach($files as $file_name)
{
    $content.=  '
         <div>
            <a href="ftp://'.$ftp_server.'/'.$file_name.'">
            <img src="ftp://'.$ftp_server.'/'.$file_name.'"    width="150" height="150">
           </a>
         </div>';
}

What I need to do that images are have been displayed on page?

回答1:

You could prepare a script (e.g. getimage.php) that, upon request…

• gets the image file from the FTP server into a (binary) string variable, like in your script, then
• prepares the image header correctly, like in the snippet below,
  (also see this link from stackoverflow)
• prints the (binary) image string.

In the HTML code insert the usual tags.

Follows a snippet of the getimage.php script. The image type is extracted manually:

// Get the image contents from FTP server into $binary
// $binary contains image text now
// Then ....

header('Content-type: ' . image_file_type_from_binary($binary));
echo $binary;

function image_file_type_from_binary($binary) {
  if (
    !preg_match(
        '/\A(?:(\xff\xd8\xff)|(GIF8[79]a)|(\x89PNG\x0d\x0a)|(BM)|(\x49\x49(?:\x2a\x00|\x00\x4a))|(FORM.{4}ILBM))/',
        $binary, $hits
    )
  ) {
    return 'application/octet-stream';
  }
  $type = array (
    1 => 'image/jpeg',
    2 => 'image/gif',
    3 => 'image/png',
    4 => 'image/x-windows-bmp',
    5 => 'image/tiff',
    6 => 'image/x-ilbm',
  );
  return $type[count($hits) - 1];
}

回答2:

The FTP connection opened on the webserver cannot anyhow help the webbrowser to authenticate to the FTP server.

---

The correct solution is to route the image through your webserver, hiding away not only the credential, but also the original source of the image.

Create a script (PHP or any other you use) that acts as the image source (you will use it in the <img src=...> attribute. The script will "produce" the image by downloading it from FTP server.

The most trivial way to implement such a script (say image.php) is:

<?

header('Content-Type: image/jpeg');

echo file_get_contents('ftp://username:[e-mail]/path/image.jpg');

And then you use it in the HTML like:

<a src="image.php" />

(assuming the image.php is in the same folder as your HTML page)

---

The script uses FTP URL wrappers. If that's not allowed on your web server, you have to go the harder way with FTP functions. See PHP: How do I read a file from FTP server into a variable?

---

Though for a really correct solution, you should provide some HTTP headers related to the file, like Content-Length, Content-Type and Content-Disposition. For this, see Download file via PHP script from FTP server to browser with Content-Length header without storing the file on the web server.