Nwlapcug.com


Come caricare immagini utilizzando Ajax



Utilizzo di AJAX per caricare le immagini su un sito Web rende il processo facile da usare, come il caricamento può verificarsi senza il browser per andare a prendere una nuova pagina. Tuttavia, AJAX da solo non puoi caricare immagini e caricamento delle immagini mediante codice lato server in genere richiede una nuova pagina per essere recuperati. Per ovviare a questi problemi, è possibile utilizzare librerie di jQuery con iframe nel codice HTML della tua pagina per caricare l'immagine pur rimanendo sulla stessa pagina.

Istruzioni

1

Scarica lo script jQuery e jQuery Upload di File multipli Plugin (vedi riferimenti per link) e metterli nella stessa directory. Crea la tua pagina web, collegamento agli script nella sezione head del codice HTML come segue:

< html >

< head >

< tipo dello script = "text/javascript" language = "javascript" language = "javascript" valori se i nomi dei file sono diversi per le versioni dello script che hai scaricato, come questi spesso cambiano. Salvare il file con estensione ". php" nella stessa directory come gli script.

2

Aggiungere il modulo di caricamento alla tua pagina Web inserendo il seguente codice tra i tag < body > di chiusura e di apertura:

< formano action="img_load.php" metodo = "post" enctype = "multipart/form-data" target = "load_frame" >

< input type = "file" nome = classe "[img]" = "multi" / >

< input type = "submit" nome = "upload" valore = "Carica immagine!" / >

< / form >

< iframe id = "load_frame" name = "load_frame" inserendo il codice riportato di seguito:

<? php

if(isset($_POST['upload']))

{$uploaddir = ' uploadedimgs /';

foreach ($ Files ["img"] ["errore"] come $index = > $status)

{Se ($status = = UPLOAD_ERR_OK)

{$temp = $ Files ["img"] ["tmp_name"] [$index];

$file_ref = $ Files ["img"] ["nome"] [$index];

$file_location = $uploaddir. baseName($file_ref);

Se (move_uploaded_file ($temp, $file_location))

{echo "< p > il tuo file (". $file_ref. ") è stata caricata! </p >";}

altro

{echo "< p > Oops! Il tuo file (". $file_ref.") non è stata caricata. </p > "; } } } }

? >

Anche se contenuta in un file separato, questo codice verrà eseguito dentro l'iframe della pagina principale, come è elencato come fonte ed è specificato come destinazione per inviare il modulo di caricamento.

4

Creare una nuova directory nella stessa directory come gli script e il nome "uploadedimgs", come questo è dove verranno posizionate tutte le immagini caricate. Caricare la pagina web, caricare PHP script, sia i file JavaScript (jQuery e Upload Plugin) e la nuova directory "uploadedimgs" al server Web. Assicurarsi che tutti i file rimangono nelle stesse posizioni relative in modo che i riferimenti di codice funzionerà correttamente.

5

Passare alla pagina web e verificare la funzionalità di caricamento. Verifica che le informazioni nella sezione iframe della pagina Aggiorna correttamente sull'invio del modulo, come tale script dovrà restituire uno dei messaggi inclusi che indica se il caricamento è stato completato o non. Controllare inoltre che le immagini siano state caricate con successo di effettuare una connessione al server e controllare il contenuto della directory "uploadedimgs".

Consigli & Avvertenze

  • È possibile nascondere gli iframe nelle pagine impostando visibility "nascosto" nel codice CSS.
  • Utilizzando iframe può essere imprevedibile, quindi assicurarsi di che testare le pagine nei vari browser.