come inviare immagine png dal server per visualizzare nel browser tramite ajax

Question

Ho avuto un momento difficile con quello che deve essere un compito incredibilmente normale. Carico e salvi le immagini sul mio server web e salva il percorso del file nel database MySQL (funziona tutto). La cosa che non funziona è recuperare un file immagine dal server e visualizzarlo sulla pagina tramite ajax.

Originariamente stavo cercando di recuperare il percorso dal database e aggiornare l'attributo src del tag con il percorso dell'immagine. Funzionava, ma in questo modo tutte le immagini si trovano in una cartella sul server dove tutti hanno accesso ad esse. Questo non è buono. Posso solo avere le immagini che appartengono a determinati utenti accessibili da questi utenti.

Per limitare l'accesso a queste foto ho aggiunto una direttiva Apache su quella cartella, che ha limitato l'accesso con successo. Il problema quindi è diventato che non sono riuscito a visualizzare le immagini nel browser impostando l'attributo src su quel percorso. Vedere il mio post: https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site

Infine ho imparato che devo usare PHP per leggere i dati dell'immagine direttamente dal server e inviare questi dati al browser. Ho usato la funzione file_get_contents(), che funziona per convertire il file immagine (PNG) sul server in una stringa. Ritorna questa stringa al browser in una chiamata Ajax. La cosa che non riesco a ottenere è: come convertire questa stringa in un'immagine usando JavaScript?

Vedi questo codice:

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

Answer 1

è possibile visualizzare un default un'immagine "nessun accesso" per gli utenti che sono proibito di accedere all'immagine:

<?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'); 
} 

E, sul lato client:

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

---

In alternativa, se davvero vuoi o devi inviare i dati tramite Ajax, puoi codificarlo con Base64:

<?php 

echo base64_encode(file_get_contents($file)); 

E mettere la risposta in un tag img utilizzando il Data URI scheme

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

Dato che i dati di codifica Base64 è significativamente più grande rispetto all'originale, è possibile inviare i dati grezzi e codificare nel browser utilizzando un library.

---

Ha senso per voi?

Answer 2

Non è possibile farlo tramite la tecnologia AJAX.

Si potrebbe fare qualcosa di simile:

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

Quindi utilizzare JavaScript per modificare la stringa di query.

Answer 3

Invece di ottenere get_image.php tramite AJAX, perché non basta usare:

<img src="get_image.php" /> 

E 'praticamente la stessa cosa. Puoi semplicemente utilizzare AJAX per aggiornare lo <img> in modo dinamico.

Answer 4

Si può effettivamente incorporare i dati di immagine all'interno del tag img nel browser, quindi il codice Ajax potrebbe essere la seguente:

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

Nota che sarà necessario scrivere questa funzione base64_encode. Dai un'occhiata a this question - la funzione è indicata qui.