CFM + Ajax et upload.

[mael94420]

Salut a tous,
J'ai un formulaire qui ajoute un contenu dans une base de données. Lorsque je clique sur le bouton, j'appel une fonction ajax qui appelle une seconde page coldfusion dans laquel j'insere mes données et je les affiche dans un tableau 'sans rafraichir la page donc.) jusque la tout va bien.
Ensuite, je souhaite dans ce meme formulaire mettre un champs file pour faire un upload.
Je n'arrive pas a uploader mon fichier car je ne sais pas comment récupérer mon form.upload dans la page appellé par ajax.

Je vous donne mon code ajax,

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
function Add_Product(ProduitEnCour){

var upload = document.forms["FormProduct"].elements["UPLOAD"].value;
var produit = ""
var Description = ""
Description = document.forms["FormProduct"].elements["DESCRIPTIONEN"].value;
produit = document.forms["FormProduct"].elements["PRODUIT"].value;
	var postSendProduct = "";
	var postUpload = "";
	httpReponse.open('post', 'script/add_associed_product.cfm');
	httpReponse.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	httpReponse.onreadystatechange = handleResponseReponseProduct;
	postSendProduct += "form.PRODUIT="+produit + "/" + Description + "/" + ProduitEnCour + "/form.upload="+upload;
	httpReponse.send(postSendProduct);

}
function handleResponseReponseProduct(){
	//alert(httpReponse.status);
	//alert(httpReponse.readyState);
	if(httpReponse.readyState == 4 && httpReponse.status == 200){
		var lst_response = httpReponse.responseText;
		if(lst_response.length > 0){
			document.getElementById('Produit_associe').style.display = 'block';
			document.getElementById('Produit_associe').innerHTML = lst_response;
		}
	}
}

Jusque la, je doit découper mon postSendProduct car je n'arrive pas a le decouper pour donner : form.produit, form.description et form.upload.

mon code coldfusion :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<cfoutput>
<cfset Produit = listgetat(#FORM.PRODUIT#,1,"/")>
<cfset Description = listgetat(#FORM.PRODUIT#,2,"/")>
<cfset ProduitEnCour = listgetat(#FORM.PRODUIT#,3,"/")>
<cfset Upload = listgetat(#FORM.PRODUIT#,4,"/")>
<cfinclude template="../../includes/variables.cfm">

<cffile action="upload" destination="#application.Dir_Upload#" filefield="FORM.UPLOAD" nameconflict="makeunique">

<cfquery name="Add_Produit_Associe" datasource="#APPLICATION.DSN#">
	INSERT INTO PRODUIT_ASSOCIE (PRODUIT_ASSOCIE_ID,PRODUIT_ID,DES_EN) VALUES (#Produit#,#ProduitEnCour#,'#DESCRIPTION#')
</cfquery>

...Je genere mon tableau...

C'est la maniere que j'utilise habituellement pour faire de l'upload et la je n'y arrive pas.

Pouvez vous maider?

Merci d'avance.

Cordialement

Mael

[jowo]

Bonjour,

Je précise que je ne connais pas AJAX. J'ai repéré deux erreurs.

1] Quand on envoie un fichier, il faut la utiliser le Content-Type 'multipart/form-data' et non 'application/x-www-form-urlencoded'.

2] L'envoi des données ne se fait pas par cette méthode pour un multipart. Je ne sais comment car je ne connais pas AJAX. En plus, il y a deux bugs probables dans la ligne:

Code :

postSendProduct += "form.PRODUIT="+produit + "/" + Description + "/" + ProduitEnCour + "/form.upload="+upload;

Que se passe-t-il si produit, description ou ProduitEncours contient le caractère ?

Les différentes valeurs des champs ne sont séparés par des '/' mais par un '&'.

Code :

postSendProduct += "form.PRODUIT=" + produit + "/" + Description + "/" + ProduitEnCour + "&form.upload="+upload;

[mael94420]

Oui mais j'ai pas donner la bonne version du code car j'était en train d'effectuer des test.
Mais merci pour t'es réponse.
En plus le client a voulu changer de facon de faire donc je n'ai plus a utiliser l'ajax.

En revanche, pour info, de quelque maniere que ce soit, d'apres ce que j'ai pu lire, il n'est pas possible d'uploader via une page appellé en AJAX.

[popogendarme]

C'est marrant ce que t'as mis en rouge par ce que j'essaie de le faire aussi et ca marche moyen.

je le fais avec jquery

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Initialize the calendar
 $(document).ready(function() {
	
});

function change_job(id_param,job_value){
 			
			var base_url="http://localhost/WebApplication/";
			var url="http://127.0.0.1:8500/cold_fusion/test/time_sheet_data_handling.cfm";
		
			$.get(url, function(response){
				alert(response);
			});	
 		}

et mon gros probleme c'est que j'obtiens en retour ce que je voulais (dans mon cas une liste deroulante initialiser avec les bonne valeur) mais coldfusion me retourne egalement l'entete et quelques autres choses peut etre utile mais que je ne veux pas dans ma page :-(

(j'espere que c pas du detournement de topic)

Julien