Salut,
Je voudrais uploader mes images en ajax, et une fois l'upload terminé, je voudrais remplacé le formulaire d'envoie par un input de type hidden avec pour valeur l'url de l'image (qui sera elle même envoyé via un autre formulaire).
J'ai téléchargé et importer le fameux jquery_form.js (que l'on trouve ici http://jquery.malsup.com/form/ )
Voici mon formulaire html :
<div id="admin">
<form id="form" action="projet/ajax.php" method="post" enctype="multipart/form-data">
<fieldset><legend>Choisissez la photo à uploader</legend>
Votre image : <br /><input type="file" name="image" id="image" /><br />
<input type="submit" name="image_ok" value="Uploader l'image" />
</fieldset>
</form>
<form id="form2" action="projet/presentation.php" method="post">
<fieldset>
<legend>Information dur la photo</legend>
<table cellspacing="0">
<tr><th>Titre de la photo : </th><th><input type="text" name="titre" /></th></tr>
<tr><th>Description de la photo : </th><th><textarea name="description" ></textarea></th></tr>
<tr><th></th><th><input type="submit" name="galerie" /></th></tr>
</table>
</fieldset>
</form>
Le premier permet l'upload de photo, le second l'envoie de donnée en bdd.
Voici le script php qui gère l'uload :
<?php
if(isset($_POST'image_ok']) && !empty($_FILES'image']'name'])){
$name = htmlspecialchars($_FILES'image']'name']);
$temp = htmlspecialchars($_FILES'image']'tmp_name']);
$repertoire = '../images/';
$format = array('png','gif','jpg','jpeg');
$extension = strtolower(substr(strrchr($_FILES'image']'name'], '.'),1));
if(in_array($extension, $format)){ // Si le format est correcte
$caractere_speciaux = array(
'é' => 'e',
'è' => 'e',
'ê' => 'e',
'ë' => 'e',
'à' => 'a',
'â' => 'a',
'ä' => 'a',
'ù' => 'u',
'ô' => 'o',
'ö' => 'o',
'ì' => 'i',
' ' => '-',
'ç' => 'c'
);
foreach($caractere_speciaux AS $c =>$v){
$nom = str_replace($c,$v,$name);
}
while(file_exists($repertoire.$nom)){
// On renomme le fichier
$nom = rand(0,100).$nom;
}
// On deplace le fichier dans le bon répertoire
$resultat = move_uploaded_file($_FILES'image']'tmp_name'],$repertoire.$nom);
if ($resultat){
$status = 'ok';
$texte = $repertoire.$nom;
}else{
$status = 'erreur';
$texte = "Le fichier ne s'est pas uploadé correctement";
}
}else{
$status = 'erreur';
$texte = "Le format est incorrect";
}
// On affiche le JSON
$donnees = array('status'=>$status,'texte'=>$texte);
echo json_encode($donnees);
}?>
Et voici le fameux script js/ajax (jquery) qui pose problème :
$(document).ready(function() {
var options =
{
url:"projet/ajax.php",
beforeSend: before,
dataType: JSON,
success: sucessful
};
$('#form').submit(function(){
$("#form").ajaxSubmit(options);
return false;
})
});
function before(){
var form = $('#form').html();
var progress = '<div class="progress"></div>';
form.html(form+progress);
};
function sucessful(data){
donnee = parseJSON(data);
if(donnee.status == 'erreur'){
alert(donnee.texte);
}else{
$('#form').hide();
var form2 = $('#form2').html();
var content = '<input type="hidden" name="image" value="'+donnee.texte+'" /><img class="img" src="'+donnee.texte+'" />';
$('#form2').html(content+form2);
}
}
L'upload se déroule sans problème, l'image est bien envoyé dans le bon dossier. Le problème c'est le changement de page. Ca doit venir de la fonction AjaxSubmit j'pense.
Normalement il ne devrait pas avoir de changement de page, or là c'est le cas :/
Je précise que firebug ne détecte aucune erreur, il ne détecte rien tout court xD
Si vous avez des idées ;)
Bon bah j'ai résouds seul mon problème.
Ca pourrait faire office de tuto video hein grafikart :P
Il fallait enlever une verification php (sur le isset($_POST'image_ok']) et aussi quelques fonction JS
Le php:
<?php
if(!empty($_FILES'image']'name'])){
$name = htmlspecialchars($_FILES'image']'name']);
$temp = htmlspecialchars($_FILES'image']'tmp_name']);
$repertoire = '../images/';
$format = array('png','gif','jpg','jpeg');
$extension = strtolower(substr(strrchr($_FILES'image']'name'], '.'),1));
if(in_array($extension, $format)){ // Si le format est correcte
$caractere_speciaux = array(
'é' => 'e',
'è' => 'e',
'ê' => 'e',
'ë' => 'e',
'à' => 'a',
'â' => 'a',
'ä' => 'a',
'ù' => 'u',
'ô' => 'o',
'ö' => 'o',
'ì' => 'i',
' ' => '-',
'ç' => 'c'
);
foreach($caractere_speciaux AS $c =>$v){
$nom = str_replace($c,$v,$name);
}
while(file_exists($repertoire.$nom)){
// On renomme le fichier
$nom = rand(0,100).$nom;
}
// On deplace le fichier dans le bon répertoire
$resultat = move_uploaded_file($_FILES'image']'tmp_name'],$repertoire.$nom);
if ($resultat){
$status = 'ok';
$texte = 'projet/'.$repertoire.$nom;
}else{
$status = 'erreur';
$texte = "Le fichier ne s'est pas uploadé correctement";
}
}else{
$status = 'erreur';
$texte = "Le format est incorrect";
}
// On affiche le JSON
$donnees = array('status'=>$status,'texte'=>$texte);
echo json_encode($donnees);
}else{
$status = 'erreur';
$texte = "Vous n'avez rien envoyé";
$donnees = array('status'=>$status,'texte'=>$texte);
echo json_encode($donnees);
}
?>
Et le JS :
$(document).ready(function() {
var options = {
target : '#form',
url:"projet/ajax.php",
dataType : 'json',
beforeSubmit: showRequest,
success: showResponse
};
function showRequest(){
var progress = '<div class="progress"></div>';
$('#form').html($('#form').html()+progress);
return true;
}
function showResponse(data){
if(data.status == 'erreur'){
}else{
$('#form').hide();
var content = '<img class="img" src="'+data.texte+'" />';
$('#admin').html(content+$('#admin').html());
$('#form2').html('<input type="hidden" name="image" value="'+data.texte+'" />'+$('#form2').html());
}
}
$('#form').submit(function(){
$(this).ajaxSubmit(options);
return false;
})
});