comment envoyer une image png à partir du serveur à afficher dans le navigateur via ajax

J'ai eu un moment difficile avec ce qui doit être incroyablement une tâche normale. J'ai télécharger et sauvegarder des images sur mon serveur web et d'enregistrer le chemin d'accès au fichier de base de données MySQL (c'est tout ce travail). La chose qui ne fonctionne pas est l'extraction d'un fichier image à partir du serveur et l'afficher sur la page via ajax.

A l'origine, j'essayais juste de récupérer le chemin d'accès à partir de la base de données et mettre à jour une balise de src attribut avec le chemin d'accès à l'image. C'était du travail, mais de cette façon, toutes les images sont dans un dossier sur le serveur où les gens ont tous accès à eux. Ce n'est pas bon. Je ne peux avoir les photos qui appartiennent à certains utilisateurs accessibles par ces utilisateurs.

Afin de restreindre l'accès à ces photos, j'ai ajouté une directive Apache sur le dossier, qui a réussi à accès restreint. Le problème devint alors que je ne pouvais pas afficher les images dans le navigateur par réglage de la src attribut à ce chemin. Voir mon post: https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

Enfin, j'ai appris que je dois utiliser PHP pour lire les données d'image directement depuis le serveur, et envoyer ces données vers le navigateur. J'ai utilisé le file_get_contents() fonction, qui fonctionne à convertir le fichier image (PNG) sur le serveur dans une chaîne de caractères. Je retourne cette chaîne pour le navigateur dans un appel ajax. La chose que je ne peux pas obtenir est: comment convertir cette chaîne en une image à l'aide de JavaScript?

Voir ce code:

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

Pourquoi ne pas simplement mettre à jour l'attribut src d'une balise img avec le javascript? Vous pouvez avoir teh src point à un script php qui accepte des valeurs entières qu'carte pour les images et avoir le script PHP côté serveur echo le fichier de contenu.
Vous pourriez faire le src de l'image est le fichier php: <img src="/get_image.php"/> Puis utiliser PHP pour la sortie de l'image directement
Dans .Net, nous voudrions faire une demande de gestionnaire qui prendrait en paramètre et retourne le contenu comme s'il s'agissait d'une requête normale. Je ne suis pas assez familier avec PHP pour savoir si il y a quelque chose de même disponible, mais je suis sûr que quelque chose pourrait être fait. Le concept de base est que vous définissez l'url de l'image/background-image CSS à quelque chose comme: http://myserver.com/getfile.php?q=myimage.jpg Le serveur, puis ouvre le fichier, obtient le contenu, et l'envoie normal httpresponse.
Merci à tous pour l'aide!!

OriginalL'auteur jeffery_the_wind | 2012-09-10

16

Vous pouvez afficher une valeur par défaut "aucun accès" de l'image pour les utilisateurs qui sont interdit d'accès de l'image:
```
<?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');
}
```
Et, sur le côté client:
```
<img src="script.php?file=path/to/file.png" />
```
Sinon, si vraiment vous voulez vraiment ou besoin d'envoyer les données via Ajax, vous pouvez l'encoder en Base64:
```
<?php

echo base64_encode(file_get_contents($file));
```
Et le lieu de la réponse dans un img balise à l'aide de la Les données de schéma d'URI
```
var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>';
```
Étant donné que les données encodées en Base64 est significativement plus grand que l'original, vous pouvez envoyer les données brutes et l'encoder dans le navigateur à l'aide d'un bibliothèque.

N'a qu'un sens pour vous?

OriginalL'auteur Alexei
3

Au lieu de s'get_image.php grâce à AJAX, pourquoi ne pas simplement utiliser:
```
<img src="get_image.php" />
```
C'est pratiquement la même chose. Vous pouvez simplement utiliser de l'AJAX pour mettre à jour le <img> dynamiquement.

OriginalL'auteur rationalboss
2

Vous ne pouvez pas le faire via ajax.

Vous pourriez faire quelque chose comme ceci:
```
<img src="script.php?image=image_name" />
```
Puis utiliser JavaScript pour modifier la chaîne de requête.

OriginalL'auteur Korikulum
1

Vous pouvez intégrer des données d'image à l'intérieur de la img balise dans le navigateur, donc ajax code pourrait ressembler à ceci:
```
$.ajax({
    url: get_image.php,
    success: function(image_string){
        $(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />);
    }
});
```
Notez que vous aurez besoin d'écrire ce base64_encode fonction. Jetez un oeil à cette question - la fonction est donnée là.

OriginalL'auteur Aleks G

Vous devez vous connecter pour publier un commentaire.