Ajax upload immagini

**azcoit** · 22-04-2012, 20:30

Ciao a tutti spero tanto possiate darmi una mano,

ho visto un tutorial dal quale ho estrapolato il codice che mi serve, anche se, non mi carica nessuna immagine, potete dirmi cosa sbaglio o se devo aggiungere qualcosa?

il link del tutorial è il seguente;
http://www.zurb.com/playground/ajax_upload

la parte che vorrei far mia è quella "New Hotness"

Adesso vi posto cio che ho fatto...............

*******************************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>
<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#newHotnessForm').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);
}
});
});

//function initZURB(){}
</script>
<style>
span.wrap { padding: 10px; }
span.wrap.hotness { margin-left: 30px; }
span.wrap.old-and-busted { width: 358px; }

span.wrap button { display: block; margin-top: 10px; }

span.wrap label { margin-bottom: 5px; }
div.preview { float: left; width: 100px; height: 100px; border: 2px dotted #CCCCCC; }
div.preview.loading { background: url(image/ajax-loader.gif) no-repeat 20px 20px; background-position:center; }
div.preview.loading img {display: none; }
/* input#imageUpload { width: 400px; }*/
div.highlight { margin-bottom: 20px; }

span.wrap form { margin: 0; }

</style>

<link rel="icon" href="/playground/favicon.ico" type="image/x-icon" />

</head>

<body id="ajaxUploadPage" class=" ">
<div id="pageHeader">
<div style="float: left; position: absolute; left: 500px;">
<h2>New Hotness</h2>
<div class="column-row">
<div class="seven columns">
<div class="preview">
[img]/playground/images/icons/128px/zurb.png[/img]
</div>

<span class="wrap hotness">
<form id="newHotnessForm" enctype="multipart/form-data" action="ajax-upload.html">
<label>Upload a Picture of Yourself</label>
<input type="file" id="imageUpload" size="20" />
<button type="submit" class="button">Save</button>
</form>
</span>
</div>
</body>
</html>

**vic53** · 22-04-2012, 21:21

a me non convince la sintassi form
action="ajax-upload.htm"
....
non dovrebbe essere uno script?
...presumo...
ciao

**azcoit** · 22-04-2012, 23:39

Ciao,
non ti convince l'action="ecc"

hai provato il codice che ho postato?

Praticamente, quando prelevo l'immagine parte una img gif loader che fa vedere il caricamento in atto,ma senza caricare l'immagine vera e propria, soluzioni?

Thanks.

**azcoit** · 23-04-2012, 20:11

Up
Nessuno sa indicarmi una soluzione al mio problema?

**br1** · 23-04-2012, 20:15

Originariamente inviato da azcoit
Up
Nessuno sa indicarmi una soluzione al mio problema?

Ma tu lo hai un programma lato server per ricevere e salvare il file che invii? (che poi in altre parole e' quanto ti e' stato gia' detto

)

**azcoit** · 23-04-2012, 20:22

in poche parole devo salvare i file che carico in una pagina php del tipo prova.php nell'action?

Per programma lato server cosa intendi?
intendi mamp, xampp ect....

**br1** · 23-04-2012, 21:22

Ti prego, prima di andare avanti documentati un pochino sul processo di upload, qui non e' l'ambiente adatto per fare didattica di base

**azcoit** · 02-05-2012, 16:44

facendo il caricamento con php mi salva le immagini nella cartella temporanea, ma quando aggiungo lo script di ajax non salva nulla e non esce l'anteprima, qualche mago che mi possa aiutare?
Vi posto html+php
************************************************** **********************
<?php
session_start();
date_default_timezone_set ('Europe/Rome');
require 'db.inc.php';

$db = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or die
('Unable to connect. Check your connection parameters.');
@mysql_select_db(MYSQL_DB, $db) or die ( @mysql_error($db));
?>
<!DOCTYPE Html>
<html>
<head>
<title>upload image form !</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/style_upload.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script src="script/ajaxupload.js"></script>
<script>
$(document).ready(function(){

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

new AjaxUpload('imageUpload', {
action: $('form#newHotnessForm').attr('action'),
name: 'tmp_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>
</head>
<body id="corpo">
<div id="content">
<div id="content-left" >
<form id="newHotnessForm" action="check_form.php" method="post" enctype="multipart/form-data">
<h2>Send Your Image</h2>

<tr>
<td>
<span class="wrap hotness">
<div class="preview">
[img]image/upload_img.png[/img]
</div>
<input type="file" id="imageUpload" class=" " name="image"/>
</span>
</td>

</tr>
<tr>
<td><input type="submit" autocomplete="false" class="button" name="submit" value=" Send "/></td>

</tr>

</form>
</div>
</div>
</body>
</html>
**************************************PHP********* ********************
<?php
session_start();
date_default_timezone_set ('Europe/Rome');
require 'db.inc.php';

$db = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or die
('Unable to connect. Check your connection parameters.');
@mysql_select_db(MYSQL_DB, $db) or die ( @mysql_error($db));

//---------------------------------------------------------cambiare questo percorso in modo che corrisponda alla cartella delle immagini
$dir = 'tmp_image/';
$unique_id = date('jmy_His');
//---------------------------------------------------------si assicura che il caricamento sia avvenuto correttamente
if ($_FILES['image']['error']!= UPLOAD_ERR_OK) {
switch ($_FILES['image']['error']) {
case UPLOAD_ERR_FORM_SIZE:
die('The uploaded file exceeds the MAX_FILE_SIZE directive that' .
' was specified in the HTML form.');
break;
case UPLOAD_ERR_INI_SIZE:
die('The uploaded file exceeds the upload_max_filesize directive in php.ini');
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 uploaded file to disk.');
break;
case UPLOAD_ERR_EXTENSION:
die('File upload stopped by extension.');
break;
default:
$redirect = 'index.php';
}
}
//---------------------------------------------------------recupera le informazioni sull'immagine appena caricata
$date = date('Y-m-j H:i:s');
list($width, $height, $type, $attr) =
@getimagesize($_FILES['image']['tmp_name']);
$imgarray = array("image/jpeg", "image/png", "image/gif", "image/bmp");
$filetype = $_FILES['image']['type'];
$filename = $unique_id . $_FILES['image']['name'];
$filesize = $_FILES['image']['size'];
//-----si assicura che il file caricato sia effettivamente un tipo di immagine supportato
if (!$filesize){
echo "The file you specified is either an invalid name, or contains Zero bytes.";
exit;
}elseif (!in_array($filetype,$imgarray)){
echo 'Invalid filetype. Please use only a .JPG, .GIF, .PNG or .BMP file.';
exit;
}
if ( @move_uploaded_file($_FILES['image']['tmp_name'], $dir . $unique_id . $_FILES['image']['name'])) {
}
//----------------controllo i dati inseriti negli input
//----------------inserisce nelle tabelle images e submit le informazioni
$query = 'INSERT INTO images
(date, filename)
VALUES
("' . $date . '", "' . $filename . '")';
$result = @mysql_query($query, $db) or die ( @mysql_error($db));
//------------------------fine inserimento nelle tabelle images e submit le informazioni
$redirect = 'form.php';
header('Location: ' . $redirect);
imagedestroy($image);
?>

**br1** · 02-05-2012, 17:53

Originariamente inviato da azcoit
facendo il caricamento con php mi salva le immagini nella cartella temporanea, ma quando aggiungo lo script di ajax non salva nulla e non esce l'anteprima, qualche mago che mi possa aiutare?
Vi posto html+php
************************************************** **********************

In prima istanza se devi postare codice sorgente sei invitato ad utilizzare i tag appositi [ php ] oppure [ code ]

In seconda istanza se e' coinvolto codice lato server come il php ( che in questa sezione e' come parlare aramaico ) e sospetti che il difetto possa essere in quel versante, chiedi di spostare la discussione nel forum appropriato.

Sposto?

**azcoit** · 02-05-2012, 18:20

Non sono molto pratico di forum,

il php come detto nel mio ultimo messaggio fa il suo lavoro senza fare una piega, quindi presumo che sia lo script di ajax a non far bene il suo lavoro.

Ma essendoci nel forum persone più competenti di me chiedevo un aiuto, in fondo è a quello che serve questo forum o mi sbaglio?

Comunque volevo farti una domanda, se il problema fosse legato ad entrambe gli script, non posso aprire lo stesso thread nella sezione php?

Grazie per l'attenzione.

Discussione: Ajax upload immagini

Strumenti discussione

Ricerca discussione

Visualizza

Ajax upload immagini

@Vik53

up

Re: up

@Br1

è possibile che sia lo script che non funge?

Re: è possibile che sia lo script che non funge?

@br1

Permessi di invio