12

私は信じられないほど普通の仕事でなければならないことに苦労してきました。画像をアップロードしてWebサーバーに保存し、ファイルへのパスをMySQLデータベースに保存します（これはすべて機能しています）。動作しないのは、サーバーから画像ファイルをフェッチし、ajaxを介してページに表示することです。

srcもともと私はデータベースからパスを取得し、画像へのパスでタグの属性を更新しようとしていました。これは機能していましたが、この方法では、すべての画像がサーバー上のフォルダーにあり、すべてのユーザーがそれらにアクセスできます。これは良くない。これらのユーザーがアクセスできるのは、特定のユーザーに属する写真のみです。

これらの写真へのアクセスを制限するために、そのフォルダーにApacheディレクティブを追加しました。これにより、アクセスが正常に制限されました。srcその場合、属性をそのパスに設定しても、ブラウザに画像を表示できないという問題が発生しました。私の投稿を参照してください：https ：//serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

最後に、PHPを使用してサーバーから直接画像データを読み取り、このデータをブラウザーに送信する必要があることを学びました。サーバー上の画像ファイル（PNG）を文字列に変換するfile_get_contents（）関数を使用しました。この文字列をajax呼び出しでブラウザに返します。私が取得できないのは 、JavaScriptを使用してこの文字列を画像に戻す方法です。

このコードを参照してください：

$.ajax({
    url: get_image.php,
    success: function(image_string){
        //how to load this image string from file_get_contents to the browser??
    }
});
4

4 に答える 4

17

画像へのアクセスが禁止されているユーザーに、デフォルトの「アクセスなし」画像を表示できます。

<?php

$file = $_GET['file']; // don't forget to sanitize this!

header('Content-type: image/png');
if (user_is_allowed_to_access($file)) {
    readfile($file);
}
else {
    readfile('some/default/file.png');
}

そして、クライアント側では:

<img src="script.php?file=path/to/file.png" />

または、本当に Ajax 経由でデータを送信したい、または送信する必要がある場合は、Base64 でエンコードできます。

<?php

echo base64_encode(file_get_contents($file));

そして、 Data URI スキームimgを使用してタグに応答を配置します

var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>';

Base64 でエンコードされたデータが元のデータよりもかなり大きい場合、未加工のデータを送信し、ライブラリを使用してブラウザーでエンコードすることができます。

それはあなたにとって意味がありますか？

于 2012-09-10T17:03:27.557 に答える
4

AJAXを介してget_image.phpを取得する代わりに、次を使用してみませんか。

<img src="get_image.php" />

それは実質的に同じことです。AJAXを使用して<img>動的に更新できます。

于 2012-09-10T16:58:39.427 に答える
2

ajax経由ではできません。

次のようなことができます。

<img src="script.php?image=image_name" />

次に、JavaScript を使用してクエリ文字列を変更します。

于 2012-09-10T16:56:43.020 に答える
1

You can actually embed image data inside the img tag in the browser, therefore ajax code could look like this:

$.ajax({
    url: get_image.php,
    success: function(image_string){
        $(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />);
    }
});

Note that you will need to write this base64_encode function. Have a look at this question - the function is given there.

于 2012-09-10T17:01:16.603 に答える