Envoi d'image et javascript

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Envoi d'image et javascript

Re: Envoi d'image et javascript

par devlop78 » 07 sept. 2011, 19:16

Code : Tout sélectionner

var ajaxSimulator = $('<iframe style="visibility:hidden;width:0px;height:0px;" src="about:blank" id="ajaxSimulator" name="ajaxSimulator"></iframe>'); fenetre.setContent(ajaxSimulator); var form = $('<form id="newMailForm" name="newMailForm" enctype="multipart/form-data" method="post" action="ajax/..." target="ajaxSimulator"></form>'); fenetre.addContent(form); // Création de bouton de validation .... validation.click(function() { ajaxSimulator.unbind(); ajaxSimulator.load(function() { var data_raw = ajaxSimulator.contents().text(); var data; try { data = jQuery.parseJSON(data_raw); } catch(e) { var box = new App_DialogBox_Error(); box.setText(data_raw); return App_DialogsHandler.show(box); } var box = new App_DialogBox_Confirm(); box.setText('Votre message a été enregistré et envoyé avec succès !'); App_DialogsHandler.show(box); }); // On fait la submission document.forms['newMailForm'].submit(); });
Comme tu le vois, rien de compliquer. Faut juste connaitre l'astuce ;)

Re: Envoi d'image et javascript

par eternalsufferin » 07 sept. 2011, 09:14

merci pour la réponse.
Je vais faire ça avec l'iframe alors. C'est un peu long à faire surtout pour récupérer seulement un texte du genre "Image bien envoyée". Au départ j'avais fait comme ça avec un code aussi trouvé sur le net. Tu peux afficher le tien ici si tu veux. Bonne journée :)

Re: Envoi d'image et javascript

par devlop78 » 07 sept. 2011, 04:34

Pas d'upload en Ajax. Perso, j'ai utilisé une iframe. J'envoie le contenu du formulaire en méthode POST normal vers l'iframe (un lien chez toi), auquel j'ai préalablement ajouté un évenement onload, qui me permet de récupérer une chaine json à l'interieur pour savoir si c'est ok ou pas. C'est ce que j'appel un AjaxSimulator (lol). Ca marche super bien, même sur IE (!!!!!!!!!!!!!!!!!), je peux te passer un bout de code si tu veux mais tu peux aussi chercher, j'ai dû trouver cette astuce quelque part.

Re: Envoi d'image et javascript

par eternalsufferin » 06 sept. 2011, 12:31

Merci pour la réponse. Seulement, ça n'affiche rien de plus.
C'est parce que la variable categorie (l'image) est envoyée au php comme une chaîne de caractère et que la super globale $_FILE n'existe pas.
Je ne sais pas comment envoyer l'image et non une simple chaîne de caractère, dans ce cas.

Re: Envoi d'image et javascript

par macgawel » 06 sept. 2011, 12:15

Bonjour.

Sans lire l'ensemble (parce que c'est trop de lignes :oops: ) :
Tu as le message d'erreur qui t'indique le test qui foire.
Commence par afficher les informations pertinentes, ça devrait t'aider :
                if(!in_array($extension, $extensions)){ //Si l'extension n'est pas dans le tableau
                $erreur = 'Seuls les fichiers de type png, gif, jpg et jpeg sont acceptés';
$erreur .= "extension = $extension<br />";
$erreur .= "Nom du fichier = $_FILES['categorie']['name']<br />";
                }

Envoi d'image et javascript

par eternalsufferin » 06 sept. 2011, 11:36

Bonjour,
j'ai un petit formulaire dans lequel on peut envoyer un titre et une image. Seulement, mon code fait que le contenu du champs de l'image est envoyé comme un simple texte et n'est donc pas stockée dans une super globale $_FILE. Du coup, elle n'arrive pas sur le serveur ftp.
J'aimerai juste que lorsqu'on envoi un titre et une image, ces 2 variables sont stockées dans une base de données, que l'image se retrouve sur mon serveur ftp et qu'il soit renvoyé dans la page du formulaire, grâce à ajax, un petit texte du genre : Image envoyée avec succès. (je ne veux pas afficher l'image dans le formulaire).

Voici mon code :

Page du formulaire :
<script type="text/javascript" src="../SCRIPTS/js/oXHR.js"></script>
<script type="text/javascript">
<!-- 
function request(callback) {
	var xhr = getXMLHttpRequest();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
		}
	};

	var nom = encodeURIComponent(document.getElementById("nom").value);
	var categorie = encodeURIComponent(document.getElementById("categorie").value);
	
	xhr.open("POST", "envois/insertCategorie.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("nom="+nom+"&categorie="+categorie);
}

function readData(sData) {
	document.getElementById("resultat").innerHTML = sData;
}
//-->
</script>


	<fieldset>
		<legend>Ajouter une catégorie</legend>
		<form action="envois/insertCategorie.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
			<p>
				<label>Nom : </label>
				<input type="text" id="nom" style="width:283px;"/>
			</p>
			<p>
				<label>Image : </label>
				<input type="file" id="categorie" />
			</p>
			<input type="button" onclick="request(readData);" value="Ajouter la catégorie" />										
		</form>
	</fieldset>
	<div id="resultat"></div>
Page insertCategorie.php :
<?php
	//on verifie que les 2 variables ne sont pas nulles
	$nom = (isset($_POST["nom"])) ? $_POST["nom"] : NULL;
	$categorie = (isset($_POST["categorie"])) ? $_POST["categorie"] : NULL;
	
	if ($nom && $categorie) {
		include('../../SCRIPTS/connect.php');
		$dossier = '../../IMAGES/Categories/';
		$fichier = basename($_FILES['categorie']['name']);
		$taille_maxi = 100000000;
		$taille = filesize($_FILES['categorie']['tmp_name']);
		$extensions = array('.png', '.gif', '.jpg', '.jpeg');
		$extension = strrchr($_FILES['categorie']['name'], '.'); 
		//Début des vérifications de sécurité...
		if(!in_array($extension, $extensions)){ //Si l'extension n'est pas dans le tableau
     		$erreur = 'Seuls les fichiers de type png, gif, jpg et jpeg sont acceptés';
		}
		if($taille>$taille_maxi){
     		$erreur = 'Fichier trop volumineux';
    	 }
		if(!isset($erreur)){ //S'il n'y a pas d'erreur, on upload
			$fichier = strtr($fichier,'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ','AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
     		$fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
     		if(move_uploaded_file($_FILES['categorie']['tmp_name'], $dossier . $fichier)){
				echo 'Chargement effectué avec succès !';			
				$sqlCompteNbCat = 'select * from CATEGORIE';
				$result= mysql_query($sqlCompteNbCat);
				$emplacement = mysql_num_rows($result);
				//insertion dans la bdd		
				$sqlInsertCat = 'insert into CATEGORIE values ("","'.$nom.'","'.$emplacement.'","'.$fichier.'")';
				mysql_query ($sqlInsertCat) or die ('Erreur SQL !'.$sqlInsertCat.'<br />'.mysql_error());
			} else { //Sinon (la fonction renvoie FALSE).     
          		echo 'Echec de la creation';
     		}
		} else {
     		echo $erreur;
		}
	} else {
		echo "Il faut remplir les 2 champs.";
	}	
?>

Actuellement, ce script me renvoie, dans la balise "resultat" : Seuls les fichiers de type png, gif, jpg et jpeg sont acceptés
Aidez moi s'il vous plait :priere: