Prévisulatisation Jquery aléatoire ?

**fazpedro** · 29/03/2012, 15h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Bovino** · 29/03/2012, 15h50

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.

**fazpedro** · 30/03/2012, 14h47

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 !..

et tout est en anglais...
Merci.

**le_chomeur** · 30/03/2012, 16h35

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

**fazpedro** · 02/04/2012, 09h49

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.

**le_chomeur** · 02/04/2012, 10h40

l'image est uploadé puis renvoyée

sur leur démo tu peux voir tout le processus en analysant l'activité réseaux.

**fazpedro** · 06/04/2012, 09h57

Bonjour,

j'ai enfin trouvé !

Voici mes codes :

Formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mais il doit me manquer des éléments

**fazpedro** · 12/04/2012, 16h12

Bonjour,

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

Voici la réponse dans le "textarea" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="error">Rien envoy&eacute; !</div>

script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**fazpedro** · 23/04/2012, 15h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Message d'erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

Merci !

**fazpedro** · 04/05/2012, 11h57

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...

Prévisulatisation Jquery aléatoire ?

jQuery

Discussions similaires

Partager

Partager