Form per invio immagini

carlitosteam · 25 Feb 2010

Ciao ragazzi sto cercando di realizzare un form per l invio di immagini ma nn ne riesco a venir a capo
Praticamente partendo dalla pagina principale (index.php) e inserendo un form per l invio delle immagini vorrei che al click su invia stampasse a video
una gif contenente un immagine di attesa nella pagina madre(index.php)...e che alla fine dell upload dell immagine quest ultima venisse mostrata sempre nella pagina principale..(index.php)

Come devo procedere per realizzare la cosa ?
Grazie

alessandro1997 · 25 Feb 2010

Di sicuro hai sbagliato sezione, andrebbe in PHP. Non è una cosa difficile, si può fare. Quindi tu vuoi che nella home vengano visualizzate tutte le immagini caricate? E dove devono essere salvata, in un database?

carlitosteam · 25 Feb 2010

alessandro1997 ha scritto:
Di sicuro hai sbagliato sezione, andrebbe in PHP. Non è una cosa difficile, si può fare. Quindi tu vuoi che nella home vengano visualizzate tutte le immagini caricate? E dove devono essere salvata, in un database?

Ciao Alessandro,si le immagini una volta finite di caricare devono visualizzarsi nella stessa pagina da cui e partita la richiesta...senza però aggiornare la pagina.Si le salvo su un database mysql,non credo che la cosa sia possibile usando solo il php...

alessandro1997 · 25 Feb 2010

E perché no? Cosa c'è di quello che hai detto che non si può fare con PHP?

carlitosteam · 25 Feb 2010

alessandro1997 ha scritto:
E perché no? Cosa c'è di quello che hai detto che non si può fare con PHP?

la chiamata asincrona...tipo invio e risposta del server nella stessa pagina da cui e partita la richiesta senza aggiornare la pagina...
Cioè se io carico un immagine da index.php...in modo dinamico alla fine del caricamento dell immagine dovrebbe visualizzarsi su index.php...ripeto senza che io aggiorni la pagina...non credo sia possibile solo con il php...o sbaglio?

alessandro1997 · 25 Feb 2010

Ah, scusa, non avevo capito che tu volessi farlo in modo asincrono. Comunque penso che stia meglio in PHP, anche perché la maggior parte del lavoro è in quel linguaggio. Comunque dai un'occhiata a questo articolo e adattalo alle tue esigenze: http://www.alessioluffarelli.it/guide_tutorial/web/upload_file_immagini.php. Poi pensiamo alla parte AJAX. Se hai problemi fammi sapere!

carlitosteam · 25 Feb 2010

alessandro1997 ha scritto:
Ah, scusa, non avevo capito che tu volessi farlo in modo asincrono. Comunque penso che stia meglio in PHP, anche perché la maggior parte del lavoro è in quel linguaggio. Comunque dai un'occhiata a questo articolo e adattalo alle tue esigenze: http://www.alessioluffarelli.it/guide_tutorial/web/upload_file_immagini.php. Poi pensiamo alla parte AJAX. Se hai problemi fammi sapere!

La parte php già l ho strutturata....mi manca quella ajax...cioè vorrei fare in modo che nel div presente nella pagina da cui parte la richiesta venga visualizzato al termine del caricamento l immagine caricata..
E la parte ajax che mi manca

alessandro1997 · 25 Feb 2010

Allora ho bisogno degli script che hai fatto fin'ora. Altrimenti come strutturo la parte AJAX?

carlitosteam · 25 Feb 2010

alessandro1997 ha scritto:
Allora ho bisogno degli script che hai fatto fin'ora. Altrimenti come strutturo la parte AJAX?

EhEhE Giusto...ti accontento subito
Questa e la pagina con il form ovvero index.php

PHP:

<html>
<head>
<body>
<form  method="post" action="upload.php" enctype="multipart/form-data">	
<input type="hidden" size="1" name="MAX_FILE_SIZE" value="3000000000">
<input name="userfile" size="2" type="file">
 <br><input  type="submit" value="Aggiorna foto">
</form>
<div id="result">Qui dovrebbe mostrare l immagine caricata</div>
</form>

Questa e la pagina che elabora il tutto

PHP:

<?

include"config.php"; 




$dimensione_massima=2651200; //dimensione massima consentita per file in byte -> 1024 byte = 1 Kb
$dimensione_massima_Kb=$dimensione_massima/1024;
$cartella_upload="immagini/"; //cartella in cui eseguire l'upload (controllare permessi scrittura)
// percorso cartella relativo $cartella_upload="../public/";
$filtrare=1; //filtrare x estensioni ammesse? 1=si 0=no
$array_estensioni_ammesse=array('.jpg','.jpeg'); //estensioni ammesse

if(!isset($_FILES['userfile']) || $_FILES['userfile']['size']==0){
	echo "<script>alert(\"Nessun file selezionato per l'upload!\");
</script>";
}elseif($_FILES['userfile']['size']>$dimensione_massima){
	echo "<script>alert(\"Il file selezionato per l'upload supera dimensione massima di $dimensione_massima_Kb Kb\");
</script>";
}else{
	$nome_file=$_FILES['userfile']['name'];
	$errore="";
	if($filtrare==1){
		$estensione = strtolower(substr($nome_file, strrpos($nome_file, "."), strlen($nome_file)-strrpos($nome_file, ".")));
		if(!in_array($estensione,$array_estensioni_ammesse)){
			$errore.="<script>alert(\"Upload file non ammesso. Estensioni ammesse: ".implode(", ",$array_estensioni_ammesse)."\");
";
		}
	}
	if(!file_exists($cartella_upload)){
		$errore.="<script>alert(\"La cartella di destinazione non esiste\");
</script></br>";
	}
	
	if($errore==""){
		if(move_uploaded_file($_FILES['userfile']['tmp_name'], $cartella_upload.$_FILES['userfile']['name'])){
			chmod($cartella_upload.$_FILES['userfile']['name'],0777); //permessi per poterci sovrascrivere/scaricare
 



error_reporting(E_ALL);
$img = "immagini/$nome_file"; // percorso al file dell'immagine
$thumbs = "miniature/"; // directory di salvataggio delle miniature create
list($width, $height)  = getimagesize($img);
// dimensioni della miniatura da creare
$thumbWidth = 120; // larghezza
$thumbHeight = 100; // altezza
$thumbscale = min($thumbWidth / $width, $thumbHeight / $height);    
$new_width = floor($thumbscale * $width);
$new_height = floor($thumbscale * $height);
$tmp_img = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($img);
imagecopyresampled($tmp_img, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
imagejpeg($tmp_img, $thumbs."$nome_file", 100);
ImageDestroy($tmp_img);

echo"<img src=\"immagini/$nome_file\">
";

  }
	}else{
		echo $errore;
	}
}

?>

softhare · 26 Feb 2010

Ed il motore per il trasferimento asincrono dov'è?

Gli script pubblicati usano javascript solo per fini marginali.
Per un upload asincrono, con immagine di attesa, devi necessariamente utilizzare le tecniche XMLHTTP.
Il che implica un utilizzo approfondito di JavaScript.
Inotre per l'invio asincrono di un form multipart con file allegati dovrai probabilmente appoggiarti anche ad un frame o iframe, eventualmente invisibile) nel quale monitorare il completamento dell'upload.

Detto in altre parole, è moooolto più complesso del codice che hai inviato.

carlitosteam · 26 Feb 2010

softhare ha scritto:
Gli script pubblicati usano javascript solo per fini marginali.
Per un upload asincrono, con immagine di attesa, devi necessariamente utilizzare le tecniche XMLHTTP.
Il che implica un utilizzo approfondito di JavaScript.
Inotre per l'invio asincrono di un form multipart con file allegati dovrai probabilmente appoggiarti anche ad un frame o iframe, eventualmente invisibile) nel quale monitorare il completamento dell'upload.

Detto in altre parole, è moooolto più complesso del codice che hai inviato.

Ciao softhare,come ho già detto in precedenza nel codice che ho postato manca totalmente la parte Ajax,purtroppo e proprio quella che sto cercando di strutturare...da adattare al codice che hai visto,per la gif di attesa avevo pensato a un div invisibile che dovrebbe apparire al click sull invio del form,il problema e che nn so poi come far sparire quel div una volta che l immagine e caricata

softhare · 26 Feb 2010

Ed innerHTML?

Per me dovresti:

- nel form specificare come target un iframe nascosto (invisibile);
- quando l'utente invia il form inserire nel div "result" il gif di attesa (via javascript: result_handler.innerHTML="...";
- quando l'utente invia il form lo invia alla applicazione che processa l'immagine e restituisce, nell'iframe, solo "ok" oppure "errore";
- monitorare (via js) l'iframe e quando il contenuto diventa "ok" oppure "errore" agire di conseguenza, modificando nuovamente l' innerHTML del div result;

Non appesantirei la cosa con ulteriori div non necessari.

carlitosteam · 27 Feb 2010

Ho fatto cosi'...e pare che funzioni

HTML:

<iframe name="nascosto"  style="display:none"></iframe>
<form name="form1" method="post" action="upload.php" id="form1" target="nascosto"  enctype="multipart/form-data" >
<input type="hidden" size="1" name="MAX_FILE_SIZE" value="3000000000">
<input name="userfile" size="2" type="file">
 <br><input  type="submit" value="Invia" onclick="document.getElementById('attesagif').innerHTML='<img src=loader.gif>'">
 </form>

<div id="attesagif"></div>
<br>
<div id="content">
</div>

nella pagina php che elabora la richiesta ho fatto cosi'..

PHP:

<html>
<head>

<script type="text/javascript" src="ahah/ahahText.js"></script>

<?

include"config.php"; 




$dimensione_massima=2651200; //dimensione massima consentita per file in byte -> 1024 byte = 1 Kb
$dimensione_massima_Kb=$dimensione_massima/1024;
$cartella_upload="immagini/"; //cartella in cui eseguire l'upload (controllare permessi scrittura)
// percorso cartella relativo $cartella_upload="../public/";
$filtrare=1; //filtrare x estensioni ammesse? 1=si 0=no
$array_estensioni_ammesse=array('.jpg','.jpeg'); //estensioni ammesse

if(!isset($_FILES['userfile']) || $_FILES['userfile']['size']==0){
	echo "<script>alert(\"Nessun file selezionato per l'upload!\");
</script>";
}elseif($_FILES['userfile']['size']>$dimensione_massima){
	echo "<script>alert(\"Il file selezionato per l'upload supera dimensione massima di $dimensione_massima_Kb Kb\");
</script>";
}else{
	$nome_file=$_FILES['userfile']['name'];
	$errore="";
	if($filtrare==1){
		$estensione = strtolower(substr($nome_file, strrpos($nome_file, "."), strlen($nome_file)-strrpos($nome_file, ".")));
		if(!in_array($estensione,$array_estensioni_ammesse)){
			$errore.="<script>alert(\"Upload file non ammesso. Estensioni ammesse: ".implode(", ",$array_estensioni_ammesse)."\");
";
		}
	}
	if(!file_exists($cartella_upload)){
		$errore.="<script>alert(\"La cartella di destinazione non esiste\");
</script></br>";
	}
	
	if($errore==""){
		if(move_uploaded_file($_FILES['userfile']['tmp_name'], $cartella_upload.$_FILES['userfile']['name'])){
			chmod($cartella_upload.$_FILES['userfile']['name'],0777); //permessi per poterci sovrascrivere/scaricare
 



error_reporting(E_ALL);
$img = "immagini/$nome_file"; // percorso al file dell'immagine
$thumbs = "miniature/"; // directory di salvataggio delle miniature create
list($width, $height)  = getimagesize($img);
// dimensioni della miniatura da creare
$thumbWidth = 120; // larghezza
$thumbHeight = 100; // altezza
$thumbscale = min($thumbWidth / $width, $thumbHeight / $height);    
$new_width = floor($thumbscale * $width);
$new_height = floor($thumbscale * $height);
$tmp_img = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($img);
imagecopyresampled($tmp_img, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
imagejpeg($tmp_img, $thumbs."$nome_file", 100);
ImageDestroy($tmp_img);

echo"<img src=\"immagini/$nome_file\">
";

  }
	}else{
		echo $errore;
	}
}

?><script>
parent.document.getElementById("content").innerHTML = "<img src='immagini/<?echo"$nome_file";?>' width='450px' />";
parent.document.getElementById("attesagif").style.visibility = 'hidden';
</script>

Funzionare funziona perfettamente..soft secondo te può essere migliorato?

softhare · 27 Feb 2010

Tutto può venire migliorato: dipende dalle risorse che il committente è disposto ad investirci.

Esempi: invece di un gif qualsiasi, mettici una progression bar...
oppure fa sparire il form una volta usato e metti al suo posto la immagine inviata...

Non c'è limite all'ulteriore sviluppo di una applicazione.

carlitosteam · 27 Feb 2010

softhare ha scritto:
Tutto può venire migliorato: dipende dalle risorse che il committente è disposto ad investirci.

Esempi: invece di un gif qualsiasi, mettici una progression bar...
oppure fa sparire il form una volta usato e metti al suo posto la immagine inviata...

Non c'è limite all'ulteriore sviluppo di una applicazione.

Be...se al posto della gif usassi la progress bar sarebbe davvero il top...il problema è che non mi sono mai occupato delle progress bar e non so proprio come crearne una....potresti gentilmente darmiq ualche spunto di codice?

softhare · 27 Feb 2010

carlitosteam ha scritto:
potresti gentilmente darmiq ualche spunto di codice?

Quanto a spunto, dovrai usare javascript per interrogare periodicamente un apposito script php sul server che restituisce il progresso dell'upload in corso.
Quindi lo javascript aggiorna il div con la progression, grafica o css o html come preferisci.
Chiaramente questo script dovrà venire eseguito solamente durante l'upload.

Richiede ottimo javascript per la parte client ed ottimo php per la parte server + ore di lavoro.

No, scusa ma non posso farlo a titolo di cortesia.
Come dicevo ci vogliono "risorse"....

Cerca

Cerca

Form per invio immagini

carlitosteam

Nuovo Utente

alessandro1997

Utente Attivo

carlitosteam

Nuovo Utente

alessandro1997

Utente Attivo

carlitosteam

Nuovo Utente

alessandro1997

Utente Attivo

carlitosteam

Nuovo Utente

alessandro1997

Utente Attivo

carlitosteam

Nuovo Utente

softhare

Utente Attivo

carlitosteam

Nuovo Utente

softhare

Utente Attivo

carlitosteam

Nuovo Utente

softhare

Utente Attivo

carlitosteam

Nuovo Utente

softhare

Utente Attivo

Discussioni simili