Prévisulatisation Jquery aléatoire ?

Version imprimable

Bonjour,
j'ai un souci sur mon code jquery :
je souhaite prévisualiser une image à l'écran avant d'effectuer l'upload mais certaines images passent bien et pas d'autres (pourtant elles semblent identiques..en JPEG..., et je ne vois pas ce qui coince dans mon code...
Merci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<style>
#supp_image {visibility:hidden;}
#titre_image {visibility:hidden;}
</style>
 
<script type="text/javascript"><!-- DEBUT script pour previsualiser l'image -->
 function show_image()
{	var mypath = document.getElementById('id_image').value;
	var html = '<img src="'+mypath+'" widht="120px" height="80px" />';
	document.getElementById('mon_image').innerHTML = html;
	document.getElementById('supp_image').style.visibility = 'visible';
	document.getElementById('titre_image').style.visibility = 'visible';
	return true;
}
</script><!-- FIN script pour previsualiser l'image -->
 
<script type="text/javascript"><!-- DEBUT script pour suppression de l'image -->
 function suppr_image()
{	
	document.getElementById('mon_image').innerHTML = '';
	document.getElementById('id_image').value = '';
	document.getElementById('supp_image').style.visibility = 'hidden';
	document.getElementById('titre_image').style.visibility = 'hidden';
	return true;
}
</script><!-- FIN script pour suppression de l'image -->
 
<tr>
<td align="right">Image : </td>
<td><input type="file" tabindex="12" name="image" id="id_image" onchange="show_image();" /></td>
</tr>
 
<tr id="titre_image">
<td align="right">Apercu : </td>
<td id="mon_image"></td>
</tr>
 
<tr id="supp_image">
<td align="right"></td>
<td><a class="bouton" tabindex="13" value="Supprimer l'image ?" onclick="suppr_image();">Suprimer l'image ? </a></td>
</tr>

29/03/2012, 15h50
Bovino

JavaScript n'a pas accès (pour des raisons de sécurité) au chemin du fichier. Donc si le fichier sélectionné est dans le même répertoire que la page, ça marchera, sinon, impossible d'y remédier.
30/03/2012, 14h47
fazpedro

En fait je voudrais un upload comme la page ci-dessous (rubrique "New Hotness")
http://www.zurb.com/playground/ajax_upload

mais j'ai pas réussi à effectuer la même chose !..:oops: et tout est en anglais...
Merci.
30/03/2012, 16h35
le_chomeur

Il faut effectivement se tourner ver l'html 5 et l'api FileReader qui te permet une fois le fichier chargé d'avoir accès a plus de propriétés qu'en html simple ( poid , l'image en elle même etc .... )

par contre pas compatible IE9 /!\ ( ni 7 et 8 ^^ )

exemple : http://html5demos.com/file-api
02/04/2012, 09h49
fazpedro

Bonjour,
je viens d'essayer la page :
http://www.zurb.com/playground/ajax_upload
sur Internet Explorer 9 et elle fonctionne bien...

mais je ne comprend toujours pas comment l'utiliser pour mon site...
Merci.
02/04/2012, 10h40
le_chomeur

l'image est uploadé puis renvoyée :)
sur leur démo tu peux voir tout le processus en analysant l'activité réseaux.

Bonjour,

j'ai enfin trouvé !

Voici mes codes :

Formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Essai Upload</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
#loading {display:none;}
#supp_image	{display:none;}
.error {color:#FF0000;font-weight:bold;}
.success, .success a {color:#009900;font-weight:bold;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery_ajax_upload.js"></script>
<script type="text/javascript">
$(document).ready(function() {	
var upload = new AjaxUpload('#userfile', {
	action: 'upload_essai.php',	//upload script
	onSubmit : function(file, extension)
	{
		$("#loading").show();					// Montre l'animation de telechargement
		if (! (extension && /^(jpg|png|jpeg|gif|pdf)$/.test(extension)))	// Verifie les extensions de fichier 
			{
				$("#loading").hide();
				$("<span class='error'>Erreur : Format de fichier non valide ! <br /> Formats autoris&eacute;s : jpg, png, jpeg, gif, pdf </span>").appendTo("#file_holder #errormes");
				return false;
			}
		else	// masque l'erreur si l'extension est OK
			{	$('.error').hide();	}
	upload.setData({'file': file});	// Envoi du fichier
	},
	onComplete : function(file, response)
		{
			$("#loading").hide();								// Masque l'animation de telechargement
			$(".success").css("display", "block");				// Montre le message du succes
			$(".image_fichier").css("display", "block");		// Montre l'image !
			$(".nom_fichier_upload").css("display", "block");	// Montre le nom recupere du fichier !
			var oBody = $(".iframe").contents().find("div");	// affecte le message d'erreur
			$(oBody).appendTo("#file_holder #errormes");
		}
	});
});
</script>
<script>
$(document).ready(function() {
	action: 'supp_essai.php'
	});	
</script>
</head>
<body>
<div id="file_holder">
<form action="" method="post" enctype="multipart/form-data">
<h3>Essai d'upload avec ajax ! </h3>
<p>
<label for="userfile">Votre image : </label>
<input id="userfile" class="input" type="file" name="userfile" />
</p>
<div id="loading"><img src="loader.gif" alt="T&eacute;l&eacute;chargement" /> T&eacute;l&eacute;chargement en cours, patientez...</div>
<div id="errormes"></div>
</form>
</div>
</body>
</html>

l'action : fichier "upload_essai.php" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
$max_filesize = 2000000;												// Taille max de l'image 2 000 000 octets = 2 Mo !
$allowed_filetypes = array('.jpg','.jpeg','.gif','.png','.pdf');		// Formats autorises
$filename = $_FILES['userfile']['name'];								// Nom du fichier d'origine et son extension / format
$ext = substr($filename, strpos($filename,'.'), strlen($filename)-1);	// Extension du fichier
$nom_fichier = '130.jpg';												// Nom du fichier ici pour l'essai !
$upload_path = 'upload/';												// Chemin de l'upload
if(!in_array($ext,$allowed_filetypes)) 									// Verification du format de fichier
	{
		die('<div class="error">Format de fichier non valide ! <br /> Formats autoris&eacute;s : jpg, png, jpeg, gif, pdf !</div>');	
	}
if(filesize($_FILES['userfile']['tmp_name']) > $max_filesize)  			// Verification de la taille
	{
		die('<div class="error">La taille du fichier est trop importante ! </div>');	
	}
if(!is_writable($upload_path)) 											// Verification des droits d'acces
	{
		die('<div class="error">Pas de droits d\'acc&eacute;s </div>');	
	}
if(move_uploaded_file($_FILES['userfile']['tmp_name'],$upload_path . $nom_fichier))	// Transfert du fichier temporaire
	{
		echo '<div class="success">'.'Votre fichier : ' . $filename .' a bien &eacute;t&eacute; enregistr&eacute; ! </div>';			// message de succes
		echo '<div class="image_fichier">'.'<img src="upload/130.jpg" width="120px" height="80px" alt="Image" title="Image" /></div>';	// Affichage de l'image
		// Nom du fichier pour enregistrement dans la Base ou suppression...
		echo '<div class="nom_fichier_upload"><form action="" method="post"><input type="hidden" name="name_fichier" value="'.$nom_fichier.'" />
		<input type="submit" id="supp_fic" value="Suprimer l\'image ?" name="supp_essai" /></form></div>';
	}
else
	{
		echo '<div class="error">'.'Echec du transfert !</div>';
	}
?>

Par contre, je souhaite que l'utilisateur puisse supprimer l'image...
voici mon fichier PHP qui fonctionne bien :
supp_essai.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
require ('configuration.php');
$upload_chemin = 'upload/';                             // Chemin de l'upload
if( isset($_POST['supp_essai']))
        {
                
                $nomfichier = (htmlspecialchars($_POST['name_fichier']));
                $fichier = $upload_chemin.$nomfichier;
                if( file_exists ( $fichier ) )
                        {
                                if(unlink($fichier))
                                        {
                                                echo '<div class="success">'.'Votre fichier : ' . $nomfichier .' a bien &eacute;t&eacute; supprim&eacute; ! </div>';                    // message de succes
                                        }
                                else
                                        {       echo '<div class="error">'.'Echec de suppression !</div>';      }
                        }
                else
                        {       echo '<div class="error">'.'Echec de suppression : le fiohier n\'existe pas !</div>';   }
        }
else
        {       echo '<div class="error">'.'Rien envoy&eacute; !</div>';        }
?>

mais, je souhaite l'avoir en AJAX afin de conserver mon formulaire, et je ne vois pas comment ?
Merci.
j'avais essayé ceci :

Code:

1
2
3
4
5
6
 
<script>
$(document).ready(function() {
	action: 'supp_essai.php'
	});	
</script>

mais il doit me manquer des éléments:calim2:

Bonjour,

j'ai essayé ceci pour la suppression en AJAX :

Voici la réponse dans le "textarea" :

Code:

<div class="error">Rien envoyé !</div>

script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
$(document).ready(function(){
     $('#ajax').click(function(){
		$.ajax({
			type: "POST",
			url: "supp_essai.php",
			msg: 'objet',
			success: function(msg){
				$('#reponse').val(msg);	}
			});
		});
});
</script>

html :

Code:

1
2
3
4
<input type="input" name="name_fichier" value="130.jpg" />
<input type="button" id="ajax" value="Test Ajax" />
<p>Resultats de l'appel ajax:</p>
<textarea id="reponse"></textarea>

supp_essai.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
require ('configuration.php');
$upload_chemin = 'upload/';                             // Chemin de l'upload
if( isset($_POST['name_fichier']))
        {       $nomfichier = (htmlspecialchars($_POST['name_fichier']));
                $fichier = $upload_chemin.$nomfichier;
                if( file_exists ( $fichier ) )
                        {
                                if(unlink($fichier))
                                        {
                                                echo '<div class="success">'.'Votre fichier : ' . $nomfichier .' a bien &eacute;t&eacute; supprim&eacute; ! </div>';                    // message de succes
                                        }
                                else
                                        {       echo '<div class="error">'.'Echec de suppression !</div>';      }
                        }
                else
                        {       echo '<div class="error">'.'Echec de suppression : le fiohier n\'existe pas !</div>';   }
        }
else
        {       echo '<div class="error">'.'Rien envoy&eacute; !</div>';        }
?>

Merci de votre aide !

Bonjour

le souci doit être dans mes données récupérées "nom de fichier" dans le fichier supp_essai.php

Si je modifie ainsi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<?php
require ('configuration.php');
$upload_chemin = 'upload/';                             // Chemin de l'upload
// if (isset($_POST["name_fichier"]))
if(1==1)
        {       // $nomfichier = (htmlspecialchars($_POST["name_fichier2"]));
                $nomfichier = "130.jpg";
                $fichier = $upload_chemin.$nomfichier;
                if( file_exists ( $fichier ) )
                        {
                                if(unlink($fichier))
                                        {       // message de succes
                                                echo '<div class="success">'.'Votre fichier : ' . $nomfichier .' a bien &eacute;t&eacute; supprim&eacute; ! </div>';
                                        }
                                else
                                        {       
                                                echo '<div class="error">'.'Echec de suppression !</div>';      
                                        }
                        }
                else
                        {       echo '<div class="error">'.'Echec de suppression : le fichier n\'existe pas !</div>';   }
        }
else
        {       
                echo '<div class="error">'.'Rien envoy&eacute; !</div>';
        }
?>

=> il me supprime bien le fichier "130.jpg" ! "Votre fichier a bien été supprimé..."

mais en indiquant ceci pour le nom du fichier :

Code:

$nomfichier = (htmlspecialchars($_POST["name_fichier2"]));

Message d'erreur :

Code:

1
2
<b>Warning</b>:  unlink(upload/) [<a href='function.unlink'>function.unlink</a>]: Is a directory in <b>/web/supp_essai.php</b> on line <b>11</b><br />
<div class="error">Echec de suppression !</div>

Je dois pas être loin mais je sèche...:cry:
Merci !

04/05/2012, 11h57
fazpedro

Bonjour,

je pense que mon anomalie est plutôt liée au PHP, je clos donc ce sujet car Jquery n'est à priori pas en cause...