11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour à vous!

Voilà, je vous présente mon problème en espérant que quelqu'un puisse le résoudre...
J'ai sur une page un système d'upload de fichier.
LE BUT: le fichier doit être uploadé avec comme ID celui du projet actuellement consulté, afin que le fichier uploadé y soit affecté pour être affiché sur la page du projet. L'upload est effectuée en AJAX avec xhr.
Pour le moment, j'ai mon champs INPUT FILE et un INPUT TEXT. Ce dernier contient en VALUE l'ID du projet concerné.
J'ai récupéré cette valeur par JS. Mon soucis est que je n'arrive pas à le passer en paramètre supplémentaire pour "xhr.send(formData);".... Comment faire? Je vous joints le code

// Create our XMLHttpRequest Object
	var xhr = new XMLHttpRequest();
	var idProjet = document.getElementById('id').value;
function loadFile() {
	// Retrieve the FileList object from the referenced element ID
	var myFileList = document.getElementById('envoi').files;
 
	// Grab the first File Object from the FileList
	var myFile = myFileList[0];
 
	// Set some variables for testing
	//var myFileName = myFile.name;
	//var myFileSize = myFile.size;
	//var myFileType = myFile.type;
	//alert("FileName: " + myFileName + "- FileSize: " + myFileSize + " - FileType: " + myFileType);
 
	// Let's upload the complete file object
	uploadFile(myFile);
}

function uploadFile(myFileObject) {
	// Open Our formData Object
	var formData = new FormData();
 
	// Append our file to the formData object
	// Notice the first argument "file" and keep it in mind
	formData.append('my_uploaded_file', myFileObject);
 
	// Open our connection using the POST method
	xhr.open("POST", 'upload.php');
	document.getElementById("upload").disable=true;
	document.getElementById("charge").style.visibility="visible";
	xhr.onreadystatechange = actualiserPage;
 
	// Send the file
	xhr.send(formData);
}

function actualiserPage() {
	if (xhr.readyState == 4) {//test si le résultat est disponible
		if (xhr.status == 200) {
			var nouveauResultat = xhr.responseText;//recup du résulat
			document.getElementById("info").innerHTML=nouveauResultat;//affecte la zone résultat			//gestion du bouton et du chargeur
			document.getElementById("upload").disabled= false;
			document.getElementById("charge").style.visibility="hidden";
		}else{
			//message d'erreur serveur
			var erreurServeur="Erreur serveur : "+xhr.status+" – "+ xhr.statusText;
			//gestion du bouton et du chargeur
			document.getElementById("upload").disabled= false;
			document.getElementById("charge").style.visibility="hidden";
			//annule la requete en cours
			objetXHR.abort();
			objetXHR=null;
		}
	}
}


et pour le PHP

<?php
/*
* Permet l'upload dans modif projet
*/

//PARAMETRES
	$dossier = 'uploads/';
	$fichier = basename($_FILES['my_uploaded_file']['name']);
	$taille_maxi = 10000000;
	$taille = filesize($_FILES['my_uploaded_file']['tmp_name']);
	$extensions = array('.xls', '.xlsx', '.doc', '.docx', '.pdf');
	$extension = strrchr($_FILES['my_uploaded_file']['name'], '.'); 
	
	
if (isset($_POST['IDProjet'])){
	$projet = $_POST['IDProjet'];
} else {
	$projet = '';
}

//Vérification de l'extension
if(!in_array($extension, $extensions)){ //Si l'extension n'est pas dans le tableau
    $erreur = 'N\'envoyez que des fichier excel, word ou PDF';}

//Vérification de la taille
if($taille>$taille_maxi){
     $erreur = 'Le fichier est trop gros...';}

if(!isset($erreur)){ //S'il n'y a pas d'erreur, on upload
    //On formate le nom du fichier ici...
    $fichier = strtr($fichier, 
        'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 
        'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
    $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
	$fichier = date("d.m.y-H_i").'-'.$fichier;
	$url = 'uploads/'.$fichier;
	
    if(move_uploaded_file($_FILES['my_uploaded_file']['tmp_name'], $dossier . $fichier)){ //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
		require_once('pdo.php');
		$insert = $connection->exec("INSERT INTO file(fileID, name, type, url) VALUES('', '$fichier', '$extension', '$url')");
        $reponse ="Envoi effectu&eacute; avec succ&egrave;s !";
		echo $reponse;
    } else { //Sinon (la fonction renvoie FALSE).
		$fail = "Echec de l'envoi!";
        echo $fail;
    }
} else {
	echo $erreur;
}

?>


Pour le HTML

<form id="upform" name="upform" action="upload.php" method="post" enctype="multipart/form-data">
				<input type="text" name="id" value="<?php echo"$recieved_val"; ?>" id="id" style="display:none">
				<label for="envoi">Envoyer un fichier</label><br><input type="file" name="envoi" id="envoi"><br>
				<input type="button" name="upload" id="upload" onClick="loadFile();">&nbsp;<img id="charge" src="http://localhost/airxpert_manager/img/loading.gif" style="visibility:hidden;" width=30 /><br>
			</form>


PS: le module d'upload par XHR est tiré d'un tuto... Je ne m'en sors pas très bien en JS pour le moment.

Merci beaucoup pour ceux qui se pencheront sur le sujet! Smiley cligne

EDIT: je viens de trouver comment passer ma variable contenant l'ID. Seulement, là, PHP reconnait bien les différentes variables à inscrire dans la BDD mais il n'écrit pas dedans T.T
Modifié par crying_psyco (23 Jan 2014 - 10:15)