Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Upload immagini con Ajax Upload e jQuery
#1
Buon giorno a tutti, sono andrea,

Mi scuso con Mattia se ho utilizzato i messaggi privati, ma non sono molto pratico di forum.

Il problema che volevo porre è il seguente, navigando nel web ho letto un thread in cui il primo messaggio diceva che riuscivi a caricare le immagini con l'upload di zurb, di seguito posto il link:

http://blog.html.it/14/06/2010/upload-di...anteprima/

Mi chiedevo visto che con il php nn sono bravo anzi peggio se potevi inviarmi il file con una mail.

il mio indirizzo è il seguente: az-1975[at]hotmail.it

vi posto anche l'html:
Codice:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Ajax Upload</title>
            <link rel="stylesheet" type="text/css" href="css/style_upload.css" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <!--<script src="script/jquery_lib_142.js"></script>-->
            <script src="script/ajaxupload.js"></script>
<script>
$(document).ready(function(){

    var thumb = $('img#thumb');    

    new AjaxUpload('imageUpload', {
        action: $('form#upload').attr('action'),
        name: 'image',
        onSubmit: function(file, extension) {
            $('div.preview').addClass('loading');
        },
        onComplete: function(file, response) {
            thumb.load(function(){
                $('div.preview').removeClass('loading');
                thumb.unbind();
            });
            thumb.attr('src', response);
        }
    });
});
</script>
<link rel="icon" href="/playground/favicon.ico" type="image/x-icon" />
</head>
    <body>
        <div style="float: left; position: absolute; left:500px;">
        <h2>Immagine Profilo</h2>
                <div class="preview">
                    <img id="thumb" width="100px" height="100px" src="image/upload_img.png" />
                </div>
                    <form id="upload" enctype="multipart/form-data" action="check_image.php">
                        <input type="file" id="imageUpload" name="filename" />
                        <button type="submit" class="button" name="submit">Save</button>
                    </form>
        </div>
    </body>
</html>
Cita messaggio
#2
Ormai sono passati quasi un paio d'anni e quella volta avevo fatto solo una prova, quindi non ho il codice originale.
Il file "check_image.php" deve effettuare l'upload e restituire il percorso dell'immagine. Non l'ho provato, quindi fai bene dei test prima di metterlo su qualche sito online. Inoltre questo script non fa il controllo sul tipo di file caricato.
Codice PHP:
<?php
$dir_upload 
'percorso/della/cartella/di/upload/'//Percorso della cartella in cui caricare i file con uno slash (/) finale
$dir_public '/percorso/della/cartella/pubblica/'//Percorso della cartella pubblica in cui caricare i file con uno slash (/) finale
$res '';
if (isset(
$_FILES['name']) && $_FILES['name']['error'] == 0) {
    if (
move_uploaded_file($_FILES['name']['tmp_name'], $dir_upload.$_FILES['name']['name'])) {
        
$res $dir_public.$_FILES['name']['name'];
    }
}
if (
$res) {
    echo 
$res;
} else {
    
header('HTTP/1.1 500 Internal Server Error');
}
?>
Mattia!
Cita messaggio
#3
(02/05/2012 18:35)Mattia Ha scritto: Ormai sono passati quasi un paio d'anni e quella volta avevo fatto solo una prova, quindi non ho il codice originale.
Il file "check_image.php" deve effettuare l'upload e restituire il percorso dell'immagine. Non l'ho provato, quindi fai bene dei test prima di metterlo su qualche sito online. Inoltre questo script non fa il controllo sul tipo di file caricato.
Codice PHP:
<?php
$dir_upload 
'percorso/della/cartella/di/upload/'//Percorso della cartella in cui caricare i file con uno slash (/) finale
$dir_public '/percorso/della/cartella/pubblica/'//Percorso della cartella pubblica in cui caricare i file con uno slash (/) finale
$res '';
if (isset(
$_FILES['name']) && $_FILES['name']['error'] == 0) {
    if (
move_uploaded_file($_FILES['name']['tmp_name'], $dir_upload.$_FILES['name']['name'])) {
        
$res $dir_public.$_FILES['name']['name'];
    }
}
if (
$res) {
    echo 
$res;
} else {
    
header('HTTP/1.1 500 Internal Server Error');
}
?>
Mi sa che è un discorso ostico perchè è da poco che tratto php, ti invio un allegato cosi vedi quello che ho combinato, praticamente se non c'è lo script ajax, il php carica normalmente nella cartella uploads, appena inserisco lo script, php nn funge più e naturalmente non visualizzo l'anteprima. Spero in un tuo aiuto!


Allegati
.rar   ajax_upload.rar (Dimensione: 42,79 KB / Download: 5)
Cita messaggio
#4
Il problema dovrebbe essere semplicemente dato dal fatto che nel form il campo si chiama "image_filename", mentre nelle opzioni dello script in AJAX lo hai chiamato "image".
Per risolvere basta che modifichi:
Codice:
new AjaxUpload('imageUpload', {
    action: $('form#upload').attr('action'),
    name: 'image_filename',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});
Mattia!
Cita messaggio
#5
(03/05/2012 06:39)Mattia Ha scritto: Il problema dovrebbe essere semplicemente dato dal fatto che nel form il campo si chiama "image_filename", mentre nelle opzioni dello script in AJAX lo hai chiamato "image".
Per risolvere basta che modifichi:
Codice:
new AjaxUpload('imageUpload', {
    action: $('form#upload').attr('action'),
    name: 'image_filename',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

Buon giorno Mattia,

ho provato a fare come mi hai detto, quando vado a clikkare sul 'save' mi da errore in 4 righe di codice!
eccole:
Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 22

Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 48

Notice: Undefined index: filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 50

Warning: getimagesize() [function.getimagesize]: Filename cannot be empty in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 50
The file you uploaded was not suported filetype

Comunque stamani cercherò di risolvere...almeno spero...!
Buona giornata.
Cita messaggio
#6
Ho modificato il "check_image.php" per evitare alcuni errori nell'utilizzo del nome del campo:
Codice PHP:
<?
$db 
mysql_connect('localhost''root''azcoit') or die
        (
'unable to connect. Check your connection parameters.');
mysql_select_db('ajax_upload'$db) or die(mysql_error($db));
//****************************************************************************cambio percorso della cartella in uso
$dir 'img/tmp_img/';
//****************************************************************************mi assicuro del caricamento effettuato
if ($_FILES['image_filename']['error']!= UPLOAD_ERR_OK) {
    switch (
$_FILES['image_filename']['error']) {
case 
UPLOAD_ERR_INI_SIZE:
        die(
'The uploaded file exceeds the upload_max_filesize directive'.'in php.ini;');
    break;
case 
UPLOAD_ERR_INI_SIZE:
        die(
'The uploaded file exceeds the MAX_FILE_SIZE directive that'.'was specified inthe HTML form.');
    break;
case 
UPLOAD_ERR_PARTIAL:
        die(
'The uploaded file was only partially uploaded.');
    break;
case 
UPLOAD_ERR_NO_FILE:
        die(
'No file was uploaded.');
    break;
case 
UPLOAD_ERR_NO_TMP_DIR:
        die(
'The server is missing a temporary folder.');
    break;
case 
UPLOAD_ERR_CANT_WRITE:
        die(
'The server failed to write the upload file to disk.');
    break;
case 
UPLOAD_ERR_EXTENSION:
        die(
'File upload stopped by extention.');
    break;
    }
}
//******************************************************************************recupero le informazioni sull'immagine appena caricata
$image_filename = isset($_POST['image_filename']) ? $_POST['image_filename'] : $_FILES['image_filename']['name'];
$image_date date('y-m-d');
list(
$width$height$type$attr) = getimagesize($_FILES['image_filename']['tmp_name']);
//******************************************************************************mi assicuro che il tipo di file caricato sia un tipo di immagine supportato
switch($type){
case 
IMAGETYPE_GIF:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.gif';
    break;
case 
IMAGETYPE_JPEG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.jpeg';
    break;
case 
IMAGETYPE_PNG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');
        }
//*******************************************************************************inserisce nella tabella images le informazioni
$query 'INSERT INTO images
        (image_filename, image_date)
VALUES
        ("' 
.$image_filename'", "' .$image_date'")';
$result mysql_query($query$db) or die (mysql_error($db));
//*******************************************************************************recupera il valore image_id che mysql ha generato automaticamente
$last_id mysql_insert_id();
//*******************************************************************************dato che id è univoco lo si può utilizzare anche come nome immagine
$imagename $last_id $ext;
//*******************************************************************************aggiorna la tabella db col nome finale dell'immagine
$query 'UPDATE images
        SET image_filename = "' 
.$imagename'"
        WHERE image_id = "' 
.$last_id'"';
$result mysql_query($query$db) or die (mysql_error($db));
//********************************************************************************salva l'immagine nella cartella di destinazione
switch ($type)    {
case 
IMAGETYPE_GIF:
    
imagegif($image$dir '/' $imagename );
    break;
case 
IMAGETYPE_JPEG:
    
imagejpeg($image$dir '/' $imagename100);
    break;
case 
IMAGETYPE_PNG:
    
imagepng($image$dir '/' $imagename );
    break;
    }
imagedestroy($image);


?>
Mattia!
Cita messaggio
#7
Sei gentilissimo a spendere il tuo tempo per gli altri,

Ho messo nella check_image il codice che mi hai postato, purtroppo
mi segnala ancora degli errori, e puntualmente non visualizzo l'anteprima.
questi sono gli errori che mi da:
***********************error***********************
Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 8

Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 34

Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 36

Warning: getimagesize() [function.getimagesize]: Filename cannot be empty in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 36
The file you uploaded was not suported filetype
********************end error***************************
(03/05/2012 08:43)Mattia Ha scritto: Ho modificato il "check_image.php" per evitare alcuni errori nell'utilizzo del nome del campo:
Codice PHP:
<?
$db 
mysql_connect('localhost''root''azcoit') or die
        (
'unable to connect. Check your connection parameters.');
mysql_select_db('ajax_upload'$db) or die(mysql_error($db));
//****************************************************************************cambio percorso della cartella in uso
$dir 'img/tmp_img/';
//****************************************************************************mi assicuro del caricamento effettuato
if ($_FILES['image_filename']['error']!= UPLOAD_ERR_OK) {
    switch (
$_FILES['image_filename']['error']) {
case 
UPLOAD_ERR_INI_SIZE:
        die(
'The uploaded file exceeds the upload_max_filesize directive'.'in php.ini;');
    break;
case 
UPLOAD_ERR_INI_SIZE:
        die(
'The uploaded file exceeds the MAX_FILE_SIZE directive that'.'was specified inthe HTML form.');
    break;
case 
UPLOAD_ERR_PARTIAL:
        die(
'The uploaded file was only partially uploaded.');
    break;
case 
UPLOAD_ERR_NO_FILE:
        die(
'No file was uploaded.');
    break;
case 
UPLOAD_ERR_NO_TMP_DIR:
        die(
'The server is missing a temporary folder.');
    break;
case 
UPLOAD_ERR_CANT_WRITE:
        die(
'The server failed to write the upload file to disk.');
    break;
case 
UPLOAD_ERR_EXTENSION:
        die(
'File upload stopped by extention.');
    break;
    }
}
//******************************************************************************recupero le informazioni sull'immagine appena caricata
$image_filename = isset($_POST['image_filename']) ? $_POST['image_filename'] : $_FILES['image_filename']['name'];
$image_date date('y-m-d');
list(
$width$height$type$attr) = getimagesize($_FILES['image_filename']['tmp_name']);
//******************************************************************************mi assicuro che il tipo di file caricato sia un tipo di immagine supportato
switch($type){
case 
IMAGETYPE_GIF:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.gif';
    break;
case 
IMAGETYPE_JPEG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.jpeg';
    break;
case 
IMAGETYPE_PNG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');
        }
//*******************************************************************************inserisce nella tabella images le informazioni
$query 'INSERT INTO images
        (image_filename, image_date)
VALUES
        ("' 
.$image_filename'", "' .$image_date'")';
$result mysql_query($query$db) or die (mysql_error($db));
//*******************************************************************************recupera il valore image_id che mysql ha generato automaticamente
$last_id mysql_insert_id();
//*******************************************************************************dato che id è univoco lo si può utilizzare anche come nome immagine
$imagename $last_id $ext;
//*******************************************************************************aggiorna la tabella db col nome finale dell'immagine
$query 'UPDATE images
        SET image_filename = "' 
.$imagename'"
        WHERE image_id = "' 
.$last_id'"';
$result mysql_query($query$db) or die (mysql_error($db));
//********************************************************************************salva l'immagine nella cartella di destinazione
switch ($type)    {
case 
IMAGETYPE_GIF:
    
imagegif($image$dir '/' $imagename );
    break;
case 
IMAGETYPE_JPEG:
    
imagejpeg($image$dir '/' $imagename100);
    break;
case 
IMAGETYPE_PNG:
    
imagepng($image$dir '/' $imagename );
    break;
    }
imagedestroy($image);


?>
Cita messaggio
#8
Cosa stampa se sotto a:
Codice PHP:
<?php 

metti:
Codice PHP:
<?php
var_dump
($_FILES); 
Mattia!
Cita messaggio
#9
Ciao Mattia dunque ho messo quello che hai postato nel file check_image.php,

glia errori che mi da adesso sono;
*********************************************************
array(0) { }
Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 9

Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 35

Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 37

Warning: getimagesize() [function.getimagesize]: Filename cannot be empty in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 37
The file you uploaded was not suported filetype

********************************************************
(03/05/2012 15:10)Mattia Ha scritto: Cosa stampa se sotto a:
Codice PHP:
<?php 

metti:
Codice PHP:
<?php
var_dump
($_FILES); 
Cita messaggio
#10
Allora lo script in JavaScript non invia nulla al file PHP, visto che l'array $_FILES è vuoto.
Come fai a controllare questi errori? Apri direttamente il file "check_image.php" o ti escono quando invii l'upload tramite JavaScript?
Mattia!
Cita messaggio
#11
Si esattamente da localhost apro il file index dove c'è il form,
.rar   ajax_upload.rar (Dimensione: 42,14 KB / Download: 3) appena faccio l'upload e vedo che non mi carica l'anteprima, quando vado a salvare, mi stampa a video questi errori, boh non so è da qualche settimana che ci sbatto la testa, ma sia tu che altri hanno detto che lo script di Ajax funziona perfettamente, quindi è perforza il php, perchè dovrebbe salvare l'immagine in una cartella, poi ajax la richiama, ma ahimè non avviene.
Speravo che tu avessi tenuto il file, visto che eri riuscito a farlo funzionare!
Ti rinvio il file zippato!
(03/05/2012 17:26)Mattia Ha scritto: Allora lo script in JavaScript non invia nulla al file PHP, visto che l'array $_FILES è vuoto.
Come fai a controllare questi errori? Apri direttamente il file "check_image.php" o ti escono quando invii l'upload tramite JavaScript?
Cita messaggio
#12
In "index.php" dove c'è:
Codice:
new AjaxUpload('imageUpload', {
    action: $('form#upload').attr('action'),
    name: 'filename',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

Devi mettere:
Codice:
new AjaxUpload('imageUpload', {
    action: $('form#upload').attr('action'),
    name: 'image_filename',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

In "check_image.php" dove c'è:
Codice PHP:
switch($type){
case 
IMAGETYPE_GIF:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.gif';
    break;
case 
IMAGETYPE_JPEG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.jpeg';
    break;
case 
IMAGETYPE_PNG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');
        } 

Devi mettere:
Codice PHP:
switch($type){
    case 
IMAGETYPE_GIF:
        
$image imagecreatefromgif($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.gif';
    break;
    case 
IMAGETYPE_JPEG:
        
$image imagecreatefromjpeg($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.jpeg';
    break;
    case 
IMAGETYPE_PNG:
        
$image imagecreatefrompng($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');


In "check_image.php" alla fine, prima della chiusura dello script, devi mettere:
Codice PHP:
echo $dir '/' $imagename

Con queste modifiche il tuo script sul mio computer funziona (nel mio caso, non avendo il database, ho eliminato le query per farlo funzionare).
Mattia!
Cita messaggio
#13
Sei un grande, visto che stai +O- dalle mie parti se ti trovi dalle parti di seregno, ti pago da bere....
adesso lo provo!
(03/05/2012 18:08)Mattia Ha scritto: In "index.php" dove c'è:
Codice:
new AjaxUpload('imageUpload', {
    action: $('form#upload').attr('action'),
    name: 'filename',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

Devi mettere:
Codice:
new AjaxUpload('imageUpload', {
    action: $('form#upload').attr('action'),
    name: 'image_filename',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

In "check_image.php" dove c'è:
Codice PHP:
switch($type){
case 
IMAGETYPE_GIF:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.gif';
    break;
case 
IMAGETYPE_JPEG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.jpeg';
    break;
case 
IMAGETYPE_PNG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');
        } 

Devi mettere:
Codice PHP:
switch($type){
    case 
IMAGETYPE_GIF:
        
$image imagecreatefromgif($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.gif';
    break;
    case 
IMAGETYPE_JPEG:
        
$image imagecreatefromjpeg($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.jpeg';
    break;
    case 
IMAGETYPE_PNG:
        
$image imagecreatefrompng($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');


In "check_image.php" alla fine, prima della chiusura dello script, devi mettere:
Codice PHP:
echo $dir '/' $imagename

Con queste modifiche il tuo script sul mio computer funziona (nel mio caso, non avendo il database, ho eliminato le query per farlo funzionare).

Mi sa che sono "rinco", mi da ancora una serie di errori, per giunta non mi avvia nemmeno lo script di Ajax, non è che saresti cosi gentile da postarmi il file zip di tutta la cartella che ti funziona?
(03/05/2012 18:12)azcoit Ha scritto: Sei un grande, visto che stai +O- dalle mie parti se ti trovi dalle parti di seregno, ti pago da bere....
adesso lo provo!
(03/05/2012 18:08)Mattia Ha scritto: In "index.php" dove c'è:
Codice:
new AjaxUpload('imageUpload', {
    action: $('form#upload').attr('action'),
    name: 'filename',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

Devi mettere:
Codice:
new AjaxUpload('imageUpload', {
    action: $('form#upload').attr('action'),
    name: 'image_filename',
    onSubmit: function(file, extension) {
        $('div.preview').addClass('loading');
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('div.preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src', response);
    }
});

In "check_image.php" dove c'è:
Codice PHP:
switch($type){
case 
IMAGETYPE_GIF:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.gif';
    break;
case 
IMAGETYPE_JPEG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.jpeg';
    break;
case 
IMAGETYPE_PNG:
    
$image imagcreatefromgif($_FILES['image_filename']['tmp_name']) or
        die(
'The file you uploaded was not suported filetype.');
    
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');
        } 

Devi mettere:
Codice PHP:
switch($type){
    case 
IMAGETYPE_GIF:
        
$image imagecreatefromgif($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.gif';
    break;
    case 
IMAGETYPE_JPEG:
        
$image imagecreatefromjpeg($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.jpeg';
    break;
    case 
IMAGETYPE_PNG:
        
$image imagecreatefrompng($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');


In "check_image.php" alla fine, prima della chiusura dello script, devi mettere:
Codice PHP:
echo $dir '/' $imagename

Con queste modifiche il tuo script sul mio computer funziona (nel mio caso, non avendo il database, ho eliminato le query per farlo funzionare).
Cita messaggio
#14
Dopo le modifiche il file "index.php" diventa così:
Codice PHP:
<?php
include('db.php');
session_start();
$session_id='1'//$session id
?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Ajax Upload</title>
            <link rel="stylesheet" type="text/css" href="css/style_upload.css" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <!--<script src="script/jquery_lib_142.js"></script>-->
            <script src="script/ajaxupload.js"></script>
<script>
$(document).ready(function(){

    var thumb = $('img#thumb');    

    new AjaxUpload('imageUpload', {
        action: $('form#upload').attr('action'),
        name: 'image_filename',
        onSubmit: function(file, extension) {
            $('div.preview').addClass('loading');
        },
        onComplete: function(file, response) {
            thumb.load(function(){
                $('div.preview').removeClass('loading');
                thumb.unbind();
            });
            thumb.attr('src', response);
        }
    });
});
</script>
<link rel="icon" href="/playground/favicon.ico" type="image/x-icon" />
</head>
    <body>
        <div style="float: left; position: absolute; left:500px;">
        <h2>Immagine Profilo</h2>
                <div class="preview">
                    <img id="thumb" width="100px" height="100px" src="image/upload_img.png" />
                </div>
                    <form id="upload" enctype="multipart/form-data" action="check_image.php">
                        <input type="file" id="imageUpload" name="filename" />
                        <button type="submit" class="button" name="submit">Save</button>
                    </form>
        </div>
    </body>
</html> 

Mentre il file "check_image.php" diventa così:
Codice PHP:
<?php
$db 
mysql_connect('localhost''root''00xxx00') or die
        (
'unable to connect. Check your connection parameters.');
mysql_select_db('ajax_upload'$db) or die(mysql_error($db));
//****************************************************************************camb?io percorso della cartella in uso
$dir 'img/tmp_img/';
//****************************************************************************mi assicuro del caricamento effettuato
if ($_FILES['image_filename']['error']!= UPLOAD_ERR_OK) {
    switch (
$_FILES['image_filename']['error']) {
case 
UPLOAD_ERR_INI_SIZE:
        die(
'The uploaded file exceeds the upload_max_filesize directive'.'in php.ini;');
    break;
case 
UPLOAD_ERR_INI_SIZE:
        die(
'The uploaded file exceeds the MAX_FILE_SIZE directive that'.'was specified inthe HTML form.');
    break;
case 
UPLOAD_ERR_PARTIAL:
        die(
'The uploaded file was only partially uploaded.');
    break;
case 
UPLOAD_ERR_NO_FILE:
        die(
'No file was uploaded.');
    break;
case 
UPLOAD_ERR_NO_TMP_DIR:
        die(
'The server is missing a temporary folder.');
    break;
case 
UPLOAD_ERR_CANT_WRITE:
        die(
'The server failed to write the upload file to disk.');
    break;
case 
UPLOAD_ERR_EXTENSION:
        die(
'File upload stopped by extention.');
    break;
    }
}
//******************************************************************************re?cupero le informazioni sull'immagine appena caricata
$image_filename = isset($_POST['image_filename']) ? $_POST['image_filename'] : $_FILES['image_filename']['name'];
$image_date date('y-m-d');
list(
$width$height$type$attr) = getimagesize($_FILES['image_filename']['tmp_name']);
//******************************************************************************mi? assicuro che il tipo di file caricato sia un tipo di immagine supportato
switch($type){
    case 
IMAGETYPE_GIF:
        
$image imagecreatefromgif($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.gif';
    break;
    case 
IMAGETYPE_JPEG:
        
$image imagecreatefromjpeg($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.jpeg';
    break;
    case 
IMAGETYPE_PNG:
        
$image imagecreatefrompng($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');

//*******************************************************************************i?nserisce nella tabella images le informazioni
$query 'INSERT INTO images
        (image_filename, image_date)
VALUES
        ("' 
.$image_filename'", "' .$image_date'")';
$result mysql_query($query$db) or die (mysql_error($db));
//*******************************************************************************r?ecupera il valore image_id che mysql ha generato automaticamente
$last_id mysql_insert_id();
//*******************************************************************************d?ato che id è univoco lo si può utilizzare anche come nome immagine
$imagename $last_id $ext;
//*******************************************************************************a?ggiorna la tabella db col nome finale dell'immagine
$query 'UPDATE images
        SET image_filename = "' 
.$imagename'"
        WHERE image_id = "' 
.$last_id'"';
$result mysql_query($query$db) or die (mysql_error($db));
//********************************************************************************?salva l'immagine nella cartella di destinazione
switch ($type)    {
case 
IMAGETYPE_GIF:
    
imagegif($image$dir '/' $imagename );
    break;
case 
IMAGETYPE_JPEG:
    
imagejpeg($image$dir '/' $imagename100);
    break;
case 
IMAGETYPE_PNG:
    
imagepng($image$dir '/' $imagename );
    break;
    }
imagedestroy($image);
echo 
$dir '/' $imagename;
?>

Gli altri file non li ho modificati.
Mattia!
Cita messaggio
#15
sei un mago! funziona alla perfezione....
mi carica l'immagine nella cartella, fa l'anteprima, però non capisco il motivo per il quale quando poi faccio per salvarla, mi stampa a video ancora questi errori:
da cosa possono dipendere?
********************************************************
Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 8

Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 34

Notice: Undefined index: image_filename in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 36

Warning: getimagesize() [function.getimagesize]: Filename cannot be empty in C:\xampp\htdocs\workinprogress\ajax_upload\check_image.php on line 36
The file you uploaded was not suported filetype
********************************************************
In ogni caso se passi dalle mie parti "Seregno" fammi un fischio che ti pago da bere!!!
Grazie.
(04/05/2012 08:38)Mattia Ha scritto: Dopo le modifiche il file "index.php" diventa così:
Codice PHP:
<?php
include('db.php');
session_start();
$session_id='1'//$session id
?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Ajax Upload</title>
            <link rel="stylesheet" type="text/css" href="css/style_upload.css" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <!--<script src="script/jquery_lib_142.js"></script>-->
            <script src="script/ajaxupload.js"></script>
<script>
$(document).ready(function(){

    var thumb = $('img#thumb');    

    new AjaxUpload('imageUpload', {
        action: $('form#upload').attr('action'),
        name: 'image_filename',
        onSubmit: function(file, extension) {
            $('div.preview').addClass('loading');
        },
        onComplete: function(file, response) {
            thumb.load(function(){
                $('div.preview').removeClass('loading');
                thumb.unbind();
            });
            thumb.attr('src', response);
        }
    });
});
</script>
<link rel="icon" href="/playground/favicon.ico" type="image/x-icon" />
</head>
    <body>
        <div style="float: left; position: absolute; left:500px;">
        <h2>Immagine Profilo</h2>
                <div class="preview">
                    <img id="thumb" width="100px" height="100px" src="image/upload_img.png" />
                </div>
                    <form id="upload" enctype="multipart/form-data" action="check_image.php">
                        <input type="file" id="imageUpload" name="filename" />
                        <button type="submit" class="button" name="submit">Save</button>
                    </form>
        </div>
    </body>
</html> 

Mentre il file "check_image.php" diventa così:
Codice PHP:
<?php
$db 
mysql_connect('localhost''root''00xxx00') or die
        (
'unable to connect. Check your connection parameters.');
mysql_select_db('ajax_upload'$db) or die(mysql_error($db));
//****************************************************************************camb?io percorso della cartella in uso
$dir 'img/tmp_img/';
//****************************************************************************mi assicuro del caricamento effettuato
if ($_FILES['image_filename']['error']!= UPLOAD_ERR_OK) {
    switch (
$_FILES['image_filename']['error']) {
case 
UPLOAD_ERR_INI_SIZE:
        die(
'The uploaded file exceeds the upload_max_filesize directive'.'in php.ini;');
    break;
case 
UPLOAD_ERR_INI_SIZE:
        die(
'The uploaded file exceeds the MAX_FILE_SIZE directive that'.'was specified inthe HTML form.');
    break;
case 
UPLOAD_ERR_PARTIAL:
        die(
'The uploaded file was only partially uploaded.');
    break;
case 
UPLOAD_ERR_NO_FILE:
        die(
'No file was uploaded.');
    break;
case 
UPLOAD_ERR_NO_TMP_DIR:
        die(
'The server is missing a temporary folder.');
    break;
case 
UPLOAD_ERR_CANT_WRITE:
        die(
'The server failed to write the upload file to disk.');
    break;
case 
UPLOAD_ERR_EXTENSION:
        die(
'File upload stopped by extention.');
    break;
    }
}
//******************************************************************************re?cupero le informazioni sull'immagine appena caricata
$image_filename = isset($_POST['image_filename']) ? $_POST['image_filename'] : $_FILES['image_filename']['name'];
$image_date date('y-m-d');
list(
$width$height$type$attr) = getimagesize($_FILES['image_filename']['tmp_name']);
//******************************************************************************mi? assicuro che il tipo di file caricato sia un tipo di immagine supportato
switch($type){
    case 
IMAGETYPE_GIF:
        
$image imagecreatefromgif($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.gif';
    break;
    case 
IMAGETYPE_JPEG:
        
$image imagecreatefromjpeg($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.jpeg';
    break;
    case 
IMAGETYPE_PNG:
        
$image imagecreatefrompng($_FILES['image_filename']['tmp_name']) or
            die(
'The file you uploaded was not suported filetype.');
        
$ext '.png';
    break;
    default:
        die(
'The file you uploaded was not suported filetype');

//*******************************************************************************i?nserisce nella tabella images le informazioni
$query 'INSERT INTO images
        (image_filename, image_date)
VALUES
        ("' 
.$image_filename'", "' .$image_date'")';
$result mysql_query($query$db) or die (mysql_error($db));
//*******************************************************************************r?ecupera il valore image_id che mysql ha generato automaticamente
$last_id mysql_insert_id();
//*******************************************************************************d?ato che id è univoco lo si può utilizzare anche come nome immagine
$imagename $last_id $ext;
//*******************************************************************************a?ggiorna la tabella db col nome finale dell'immagine
$query 'UPDATE images
        SET image_filename = "' 
.$imagename'"
        WHERE image_id = "' 
.$last_id'"';
$result mysql_query($query$db) or die (mysql_error($db));
//********************************************************************************?salva l'immagine nella cartella di destinazione
switch ($type)    {
case 
IMAGETYPE_GIF:
    
imagegif($image$dir '/' $imagename );
    break;
case 
IMAGETYPE_JPEG:
    
imagejpeg($image$dir '/' $imagename100);
    break;
case 
IMAGETYPE_PNG:
    
imagepng($image$dir '/' $imagename );
    break;
    }
imagedestroy($image);
echo 
$dir '/' $imagename;
?>

Gli altri file non li ho modificati.
Cita messaggio
#16
Quegli errori escono quando viene richiamato "check_image.php" senza che venga caricato un file (cioè quando viene aperto direttamente e non dopo l'upload).
Ti escono questi errori quando clicchi con il tasto destro sull'immagine e la salvi?

Per non far uscire quegli errori, ma solo il messaggio puoi aggiungere queste righe all'inizio di "check_image.php" subito dopo la connessione al database:
Codice PHP:
if (!isset($_FILES['image_filename'])) {
    
$_FILES['image_filename'] = array('error' => UPLOAD_ERR_NO_FILE);

Mattia!
Cita messaggio
#17
Ciao Mattia,
dunque io apro il file index.php, carico l'immagine, fa l'anteprima e quando clikko sul bottone "SAVE" , va alla pagina check_image.php che sta nell'action e mi stampa quegli errori.
Comunque ho messo quelle righe di codice che mi hai detto, adesso quando ha fatto l'upload e l'anteprima esce il seguente messaggio: No file was uploaded. Anche se io ritrovo l'immagine caricata sia nella cartella di destinazione sia nel DB.
C'è un'altra cosa che volevo domandarti, ho fatto caso che facendo l'upload di più immagini, questo me li salva tutti nel db, ma se volessi che un utente, se non gli garba l'immagine caricata, decide di cambiarla facendo un'altro upload, come potrei fare affinchè l'ultima immagine sostituisca quella precendente, e quindi salvare solamente quella che è stata scelta?
(04/05/2012 10:17)Mattia Ha scritto: Quegli errori escono quando viene richiamato "check_image.php" senza che venga caricato un file (cioè quando viene aperto direttamente e non dopo l'upload).
Ti escono questi errori quando clicchi con il tasto destro sull'immagine e la salvi?

Per non far uscire quegli errori, ma solo il messaggio puoi aggiungere queste righe all'inizio di "check_image.php" subito dopo la connessione al database:
Codice PHP:
if (!isset($_FILES['image_filename'])) {
    
$_FILES['image_filename'] = array('error' => UPLOAD_ERR_NO_FILE);

Cita messaggio
#18
Quando clicchi sul pulsante "Save" spedisce il form con l'upload dell'immagine, ma non spedisce nulla perché lo script in JavaScript credo che lo svuoti. In teoria il pulsante sarebbe da nascondere per chi ha JavaScript, perché è inutile.
Per poter far scegliere il file dovresti modificare "check_image.php" in modo che possa ricevere anche l'ID del file da caricare (e quindi sostituire) e nello script in JavaScript bisogna capire se c'è la possibilità di mandarlo (lo si può estrapolare dal nome del file che viene restituito).
Mattia!
Cita messaggio
#19
Che dire mi sei stato di grande aiuto, grazie per la tua attenzione e pazienza!
Andrea.
(04/05/2012 13:06)Mattia Ha scritto: Quando clicchi sul pulsante "Save" spedisce il form con l'upload dell'immagine, ma non spedisce nulla perché lo script in JavaScript credo che lo svuoti. In teoria il pulsante sarebbe da nascondere per chi ha JavaScript, perché è inutile.
Per poter far scegliere il file dovresti modificare "check_image.php" in modo che possa ricevere anche l'ID del file da caricare (e quindi sostituire) e nello script in JavaScript bisogna capire se c'è la possibilità di mandarlo (lo si può estrapolare dal nome del file che viene restituito).
Cita messaggio


Discussioni simili
Discussione Autore Risposte Letto Ultimo messaggio
  Script Upload Chandler 43 102.373 10/12/2008 16:22
Ultimo messaggio: Mattia

Vai al forum:


Utenti che stanno guardando questa discussione: 1 Ospite(i)