Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Visualizzare miniatura della pagina uploadata con jQuery

marzo 13th, 2010 by Giovanni Caputo

Circa un mese fa vi proposi un articolo, molto interessate che permetteva di uplodare contemporaneamente più file sul vostro server;

Upload di più file in PHP [Multiple file PHP]

Adesso invece, quello che vi propongo, è uno script che permette di visualizzare una miniatura dell’immagine caricata sul server.

Penso che sia possibile anche una integrazione tra i due script.

Tale script, e la guida è possibile visionarla su: http://www.zurb.com/playground/ajax_upload

Category: Programmazione | No Comments »

Upload di più file in PHP [Multiple file PHP]

gennaio 19th, 2010 by Giovanni Caputo

Ciao a tutti,

oggi vi propongo come realizzare l’upload di più file in PHP.

Prima di tutto mi sono servito di una libreria javascript che fornisce una interfaccia molto semplice per aggiungere nuovi file ed eventualmente eliminare i file da uploadare.

La libreria è

jQuery Multiple File Upload Plugin

Vediamo in dettaglio come realizzare:

Prima di tutto creamo una form in un nuovo file .html

<html>

<head>
<script src="jquery-latest.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
</head>

<body>

<form action="upload_file.php" method="post"
enctype="multipart/form-data">
<label for="file">Foto:</label>
<input type="file" accept="gif|jpg" maxlength="3" name="file[]"/>
<br />
<input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>

In particolare vengono aggiungi 2 script js scaricabili dal seguente link: LINK

Ssuccessivamente viene definito un normale form con method=”post” ed enctype=”multipart/form-data, e un campo file <input type=”file” accept=”gif|jpg” maxlength=”3″ name=”file[]”/>. Questo codice può essere personalizzato per modificare il tipo di file permessi, il numero di file da uploadre etcc… Per maggiori informazioni vedere gli esempi nel tab example della libreria javascipt precedentemente descritta.

Il risultato di questa form permette al server di ottenere nella variabile $_FILES un vettore contentente i file.

C’è però un piccolo problema, inquanto, il vettore di file non salvato come logicamente potremmo pensare:

array(
  [0] => array(
    'name' => 'file1.txt',
    'tmp_name' => '/tmp/abcdef'
    ....
  ),
  [1] => array(
    'name' => 'file2.txt',
    'tmp_name' => '/tmp/ghijkl'
    ....
  )
);

invece ha una struttra del tipo:

array(
  'name' => array(
    [0] => 'file1.txt',
    [1] => 'file2.txt'
  ),
  'tmp_name' => array(
    [0] => '/tmp/abcdef',
    [1] => '/tmp/ghijkl'
  ),
  ...
);

Quindi abbiami bisogno di una funzione che permetta questo tipo di conversione.
Di seguito il file php (upload_file.php) che permette appunto di convertire, e salvare i file in una cartella upload.

<?php
$files=$_FILES["file"];

$files=array();
$fdata=$_FILES['file'];
if(is_array($fdata['name'])){
 for($i=0;$i<count($fdata['name']);++$i){
 $files[]=array(
 'name'    =>$fdata['name'][$i],
 'tmp_name'=>$fdata['tmp_name'][$i],
 'type' => $fdata['type'][$i],
 'size' => $fdata['size'][$i],
 'error' => $fdata['error'][$i],
 
 );
 }
}
else $files[]=$fdata;

foreach($files as $file){

 salva($file);

}




function salva($file){

if ((($file["type"] == "image/gif")
|| ($file["type"] == "image/jpeg")
|| ($file["type"] == "image/pjpeg"))
&& ($file["size"] < 20000))
 {
 if ($file["error"] > 0)
 {
 echo "Return Code: " . $file["error"] . "<br />";
 }
 else
 {
 echo "Upload: " . $file["name"] . "<br />";
 echo "Type: " . $file["type"] . "<br />";
 echo "Size: " . ($file["size"] / 1024) . " Kb<br />";
 echo "Temp file: " . $file["tmp_name"] . "<br />";

 if (file_exists("upload/" . $file["name"]))
 {
 echo $file["name"] . " already exists. ";
 }
 else
 {
 move_uploaded_file($file["tmp_name"],
 "upload/" . $file["name"]);
 echo "Stored in: " . "upload/" . $file["name"];
 }
 }
 }
else
 {
 echo "Invalid file";
 }
}
?>

Category: Programmazione, Siti Web, Tecnologia | No Comments »