Chiamate ajax da js a php per immagini

#1
Buonasera, mi trovo un po in difficoltà con il php.

vorrei sapere se (e se si come) è possibile inviare una immagine ad un file js che effettua una chiamata asincrona ad un file php.

Mi spiego meglio, vorrei impostare lo sfondi di un sito , ma vorrei che questa immagine di sfondo fosse passata tramite una chiamata ad un file .php .

apro il sito.html --> lo script js con ajax richiama il php --> il php cerca tra i file l'immagine e la invia --> il js la imposta come immagine.

Spero di essere stato chiaro, grazie mille dell'aiuto in anticipo
 
2,791
704
Hardware Utente
CPU
i7 3770
Dissipatore
stock intel
Scheda Madre
Gigabyte GA-H67A-UD3H-B3
Hard Disk
SSD SAMSUNG 850EVO 250GB + HDD WD GREEN CAVIAR 2TB
RAM
16GB = Corsair XMS3 4x4GB DDR3 1600MHz CL9
Scheda Video
ATI Firepro V7900 2GB
Scheda Audio
Soundblaster X-Fi
Monitor
HP 27'' + Benq 19''
Sistema Operativo
Windows10-pro64/OpenSUSE-QL42.3/Manjaro-17.0.2-KDE
#2
Il file PHP richiamato dallo script js trasmetterà il nome dell'immagine e non l: immagine. Poi, con quel nome lo script dovrà lavorare sul DOM per ricaricarla leggendola dal server tramite http

Inviato dal mio Nexus 5 utilizzando Tapatalk
 
#3
Capisco, mi sapresti dire come richiedere al server l'invio di un'immagine?

Perché vorrei caricare l'immagine di sfondo con il js, però vorrei anche che dopo un tot di tempo si ricaricasse in modo da mostrare l'immagine nuova nel caso fosse stata modificata nel server.
 
2,791
704
Hardware Utente
CPU
i7 3770
Dissipatore
stock intel
Scheda Madre
Gigabyte GA-H67A-UD3H-B3
Hard Disk
SSD SAMSUNG 850EVO 250GB + HDD WD GREEN CAVIAR 2TB
RAM
16GB = Corsair XMS3 4x4GB DDR3 1600MHz CL9
Scheda Video
ATI Firepro V7900 2GB
Scheda Audio
Soundblaster X-Fi
Monitor
HP 27'' + Benq 19''
Sistema Operativo
Windows10-pro64/OpenSUSE-QL42.3/Manjaro-17.0.2-KDE
#4
Devi ricaricare la pagina.

Ma cosa vorresti fare di preciso? Forse uno slide show dello sfondo? In tal caso le immagini le devi caricare tutte al caricamento della pagina (dal server tramite http) e visualizzarle ciclicamente con uno script.

Inviato dal mio Nexus 5 utilizzando Tapatalk
 

1nd33d

Utente Attivo
644
265
Hardware Utente
CPU
Intel i5 3570K @ 4,5Ghz
Dissipatore
Scythe Mugen 2
Scheda Madre
Gigabyte Z77X-UD3H
Hard Disk
Samsung 840 PRO 256GB + Sandisk Ultra 250GB + Sandisk Plus 960GB
RAM
2x8GB Crucial Ballistix Tactical @2000Mhz CL9
Scheda Video
XFX RX480 GTR Black Edition
Scheda Audio
Auzentech X-Fi Forte
Monitor
AOC i2369VW
Alimentatore
Seasonic P660
Case
eh?
Periferiche
Razer Naga HEX v2
Sistema Operativo
Windows 10 64bit - Linux Mint 18
#5
Senza nemmeno usare jquery, puoi impostare la ripetizione temporizzata di una funzione js che reimposta il background.
E' tuttavia necessario ingannare in qualche modo la cache del browser che non riscaricherà l'immagine se gli passi sempre lo stesso link (fino a quando non fai un refresh dell'intera pagina). Un codice del genere però dovrebbe funzionare:
HTML:
<html>
<head>
<style>
#foodiv{
    margin: 0 auto;
    width:20em;
    height:20em;
    text-align:center;
}
</style>
</head>
<body>
<div id="foodiv">
Ciao Mondo!
</div>
<script>
    var x = 0;
    function setbg(){
        document.getElementById('foodiv').style.background = 'url(https://picsum.photos/200/?random&qualcosa=' + x +')';
        x = x+1;
    };
    setbg();
    setInterval(setbg, 3000);  //ogni 3 secondi
</script>
</body>
</html>
L'accorgimento qui è quello di inserire un valore diverso in coda al link all'immagine (nella query). In questo esempio sto chiamando un sito che genera immagini random ad ogni chiamata, nel tuo caso devi inserire il link alla pagina php che dovrà rispondere con l'immagine da impostare.
Un problema qui è che ogni aggiornamento provoca un download dell'immagine anche se non è cambiata e per un istante vedi il background scomparire.
Dovresti prevedere un meccanismo che ti permetta di evitare chiamate inutili che restituirebbero la stessa immagine, per esempio fornendo un endpoint che ti dice se e quando è stata cambiata l'immagine, o il suo hash. Oppure, potresti usare ajax per scaricare l'immagine e lato client ne controlli l'hash rispetto all'immagine che hai attualmente come background (in questo caso però non ti risparmi il numero di richieste e i dati trasmessi, ma riesci ad evitare il fastidio grafico).
Di soluzioni possibili ce ne sono diverse...
 
Mi Piace: Guaro99
#6
Devi ricaricare la pagina.

Ma cosa vorresti fare di preciso? Forse uno slide show dello sfondo? In tal caso le immagini le devi caricare tutte al caricamento della pagina (dal server tramite http) e visualizzarle ciclicamente con uno script.

Inviato dal mio Nexus 5 utilizzando Tapatalk

Vorrei creare una sorta di stream video usando questo metodo di invio delle immagini.
Grazie della risposta
Post unito automaticamente:

Senza nemmeno usare jquery, puoi impostare la ripetizione temporizzata di una funzione js che reimposta il background.
E' tuttavia necessario ingannare in qualche modo la cache del browser che non riscaricherà l'immagine se gli passi sempre lo stesso link (fino a quando non fai un refresh dell'intera pagina). Un codice del genere però dovrebbe funzionare:
HTML:
<html>
<head>
<style>
#foodiv{
    margin: 0 auto;
    width:20em;
    height:20em;
    text-align:center;
}
</style>
</head>
<body>
<div id="foodiv">
Ciao Mondo!
</div>
<script>
    var x = 0;
    function setbg(){
        document.getElementById('foodiv').style.background = 'url(https://picsum.photos/200/?random&qualcosa=' + x +')';
        x = x+1;
    };
    setbg();
    setInterval(setbg, 3000);  //ogni 3 secondi
</script>
</body>
</html>
L'accorgimento qui è quello di inserire un valore diverso in coda al link all'immagine (nella query). In questo esempio sto chiamando un sito che genera immagini random ad ogni chiamata, nel tuo caso devi inserire il link alla pagina php che dovrà rispondere con l'immagine da impostare.
Un problema qui è che ogni aggiornamento provoca un download dell'immagine anche se non è cambiata e per un istante vedi il background scomparire.
Dovresti prevedere un meccanismo che ti permetta di evitare chiamate inutili che restituirebbero la stessa immagine, per esempio fornendo un endpoint che ti dice se e quando è stata cambiata l'immagine, o il suo hash. Oppure, potresti usare ajax per scaricare l'immagine e lato client ne controlli l'hash rispetto all'immagine che hai attualmente come background (in questo caso però non ti risparmi il numero di richieste e i dati trasmessi, ma riesci ad evitare il fastidio grafico).
Di soluzioni possibili ce ne sono diverse...

Grazie mille del codice, appena ho un po di tempo proverò a testarlo e implementarlo.

Grazie molte della risposta
 
2,791
704
Hardware Utente
CPU
i7 3770
Dissipatore
stock intel
Scheda Madre
Gigabyte GA-H67A-UD3H-B3
Hard Disk
SSD SAMSUNG 850EVO 250GB + HDD WD GREEN CAVIAR 2TB
RAM
16GB = Corsair XMS3 4x4GB DDR3 1600MHz CL9
Scheda Video
ATI Firepro V7900 2GB
Scheda Audio
Soundblaster X-Fi
Monitor
HP 27'' + Benq 19''
Sistema Operativo
Windows10-pro64/OpenSUSE-QL42.3/Manjaro-17.0.2-KDE
#8
Vorrei creare una sorta di stream video usando questo metodo di invio delle immagini.
Grazie della risposta
Post unito automaticamente:




Grazie mille del codice, appena ho un po di tempo proverò a testarlo e implementarlo.

Grazie molte della risposta
Non puoi usare Ajax per trasmettere le immagini

Inviato dal mio Nexus 5 utilizzando Tapatalk
 

1nd33d

Utente Attivo
644
265
Hardware Utente
CPU
Intel i5 3570K @ 4,5Ghz
Dissipatore
Scythe Mugen 2
Scheda Madre
Gigabyte Z77X-UD3H
Hard Disk
Samsung 840 PRO 256GB + Sandisk Ultra 250GB + Sandisk Plus 960GB
RAM
2x8GB Crucial Ballistix Tactical @2000Mhz CL9
Scheda Video
XFX RX480 GTR Black Edition
Scheda Audio
Auzentech X-Fi Forte
Monitor
AOC i2369VW
Alimentatore
Seasonic P660
Case
eh?
Periferiche
Razer Naga HEX v2
Sistema Operativo
Windows 10 64bit - Linux Mint 18
#10
2,791
704
Hardware Utente
CPU
i7 3770
Dissipatore
stock intel
Scheda Madre
Gigabyte GA-H67A-UD3H-B3
Hard Disk
SSD SAMSUNG 850EVO 250GB + HDD WD GREEN CAVIAR 2TB
RAM
16GB = Corsair XMS3 4x4GB DDR3 1600MHz CL9
Scheda Video
ATI Firepro V7900 2GB
Scheda Audio
Soundblaster X-Fi
Monitor
HP 27'' + Benq 19''
Sistema Operativo
Windows10-pro64/OpenSUSE-QL42.3/Manjaro-17.0.2-KDE
#11

1nd33d

Utente Attivo
644
265
Hardware Utente
CPU
Intel i5 3570K @ 4,5Ghz
Dissipatore
Scythe Mugen 2
Scheda Madre
Gigabyte Z77X-UD3H
Hard Disk
Samsung 840 PRO 256GB + Sandisk Ultra 250GB + Sandisk Plus 960GB
RAM
2x8GB Crucial Ballistix Tactical @2000Mhz CL9
Scheda Video
XFX RX480 GTR Black Edition
Scheda Audio
Auzentech X-Fi Forte
Monitor
AOC i2369VW
Alimentatore
Seasonic P660
Case
eh?
Periferiche
Razer Naga HEX v2
Sistema Operativo
Windows 10 64bit - Linux Mint 18
#12
Magari leggere tutto il thread!?! Uno slide show manuale è forse uno streaming video??
Io devo ancora capire se l'utente ha chiaro cosa vuole fare... prima vuole caricare immagini, poi ricaricarle ogni tot tempo, poi "una sorta di stream video usando questo metodo di invio delle immagini" (???), poi "una sorta di stream video quali in live"... adesso gli sfondi sono diventati streaming video live.
Comunque... se tu avessi letto il link, avresti notato anche uno slideshow automatico, che di fatto può simulare uno "streaming" di immagini (io mi riferivo a quello).
 
Mi Piace: rctimelines
#13
Io devo ancora capire se l'utente ha chiaro cosa vuole fare... prima vuole caricare immagini, poi ricaricarle ogni tot tempo, poi "una sorta di stream video usando questo metodo di invio delle immagini" (???), poi "una sorta di stream video quali in live"... adesso gli sfondi sono diventati streaming video live.
Comunque... se tu avessi letto il link, avresti notato anche uno slideshow automatico, che di fatto può simulare uno "streaming" di immagini (io mi riferivo a quello).
Chiedo scusa, non volevo generare conflitti tra utenti.

Mi spiego meglio perché effettivamente non sono stato in grado di chiarire il mio problema efficacemente.

Ho un programma in c# che in loop effettua degli screenshot in un PC (che in questo caso farebbe da server).
Io avrei voluto che un secondo PC richiedesse in loop le immagini per visualizzarle in una pagina, credevo che questo mi avrebbe permesso di creare un movimento quasi fluido delle immagini.

Considerando che questo modo di procedere è stato escluso nel corso della discussione sapreste consigliarmi un altro procedimento?
 
2,791
704
Hardware Utente
CPU
i7 3770
Dissipatore
stock intel
Scheda Madre
Gigabyte GA-H67A-UD3H-B3
Hard Disk
SSD SAMSUNG 850EVO 250GB + HDD WD GREEN CAVIAR 2TB
RAM
16GB = Corsair XMS3 4x4GB DDR3 1600MHz CL9
Scheda Video
ATI Firepro V7900 2GB
Scheda Audio
Soundblaster X-Fi
Monitor
HP 27'' + Benq 19''
Sistema Operativo
Windows10-pro64/OpenSUSE-QL42.3/Manjaro-17.0.2-KDE
#14
Ho un programma che in loop effettua degli screenshot in un PC (che in questo caso farebbe da server).
Io avrei voluto che un secondo PC richiedesse in loop le immagini per visualizzarle in una pagina, credevo che questo mi avrebbe permesso di creare un movimento quasi fluido delle immagini.
Nessuna disputa, forse ti manca la terminologia corretta, perché sinceramente, continuo a capire molto poco di quanto sopra!



Inviato dal mio Nexus 5 utilizzando Tapatalk
 
#15
Ma vuoi crearti da solo un sistema di stream video ?
Perchè la strada non è certo lavorare di screenshot ma molto molto più complessa.

Se è uno studio o una soddisfazione personale ne possiamo discutere ma se è una soluzione ad un altro problema allora meglio usare cose già esistenti...