uploader des fichiers à partir du même formulaire

25 juil. 2005, 11:28

Bonjour à tous,

J'aimerais pouvoir uploader plusieurs fichiers à partir d'un même formulaire. L'utilisateur grace à 2 liens peut ajouter et supprimer un "<input type='file' name='photo[]'>" affin de télécharger autant de photos qu'il le souhaite.
Le formulaire est ensuite traité par un fichier php

Ce qui marche :
- Grace aux liens il est possible d'ajouter et de supprimer des "<input type='file' name='photo[]'>"

- Le traitement php (ajout.php) fonctionne car lorsque je n'utilise pas javascript et que j'écris en "dur" plusieurs "<input type='file' name='photo[]'>", le traitement est OK.

Mon problème :
Lorsque les "<input type='file' name='photo[]'>" sont générés par javascript, lors du traitement du formulaire par le code php, j'ai une erreur signalant que le tableau photos[] n'existe pas !

Quelqu'un aurais -t -il une explication ? ai-je été claire ?

Mon code (allégé) :

Code javascript + le formulaire :

Code : Tout sélectionner

<script type="text/javascript">
<!--/*--><![CDATA[//> <!--

var nbre_photos=0;

function ajouter() {

//creation du sous-noeud Input File
var elem_input_photo = document.getElementById("input_photo");
var inputF = document.createElement("input");
var br = document.createElement("br");
var typeI = document.createAttribute("type");
typeI.nodeValue = "file";
inputF.setAttributeNode(typeI);
var nameI = document.createAttribute("name");
nameI.nodeValue = "photo[]";
inputF.setAttributeNode(nameI);
elem_input_photo.appendChild(br);
elem_input_photo.appendChild(inputF);

// Incrémentation de la variable nbre_photos
nbre_photos++;

document.getElementById("nbrephotos").value=nbre_photos;
}

function remove() {
document.getElementById("input_photo").removeChild(document.getElementById("input_photo").lastChild);
document.getElementById("input_photo").removeChild(document.getElementById("input_photo").lastChild);
nbre_photos--;
}


//--><!]]>
</script>

<form enctype="multipart/form-data" action="ajout.php" method="post" >

<div id="input_photo">
</div>

<a href="javascript:ajouter()">Joindre un autre fichier</a>
<a href="javascript:remove()">Supprimer un fichier</a>


<input title="Type : submit" name="submit" type="submit" value="Envoyer"/></td>
<input title="Type : reset" name="reset" type="reset" value="Effacer"/></td>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<input id="nbrephotos" type="hidden" name="nbre_photos" value="0" />

</form>

Le traitement php :

<?
$id=10; // $id est un numéro à associer à chaque photo.

////////////////////////////////////// Récupère le nombres de photos à uploader
$nbre_photos=$_REQUEST["nbre_photos"];
echo $nbre_photos;
echo  ("<br />");

///////////////////////////// Affiche les noms temporaire des fichiers uploadés
for ($j=0;$j<($nbre_photos);$j++)
      {
      echo "<br />";
      echo "j=".$j;
      $nomphoto=($id."-".$j.".jpg");
      echo "<br />$nomphoto<br />";
      echo $_FILES["photos"]["tmp_name"][$j];
      echo "<br />";
}

25 juil. 2005, 18:09

je dis ça comme ça mais est ce que cela ne pourrait pas venir de l'ordre de tes arguments dans :

///////////////////////////// Affiche les noms temporaire des fichiers uploadés
...
      echo $_FILES["photos"]["tmp_name"][$j];
...
}

est ce que dans cet ordre, ça ne marcherait pas?

///////////////////////////// Affiche les noms temporaire des fichiers uploadés
...
      echo $_FILES["photos"][$j]["tmp_name"];
...
}

02 août 2005, 14:06

Heyo !!

je suis trop content d'etre enfin tombé sur un post ou quelqu'un cherche a faire la meme chose que moi.

je vien de récupérer ton code javascript. en effet la variable $photo[] pose probleme.

j'ai réussi a résoudre le probleme en utilisant une simple variable plutot qu'un tableau. le nom de l'input est photo suivit du numero de l'input. ainci le formulaire est composé de plusieur input dont les nom sont photo1 , photo2 , photo3 , etc .... puis je récupére les $_FILES['photo1']['tmp_name'] , $_FILES['photo2']['tmp_name'] , etc , dans mon php.

pour ce faire j'ai simplement changer nameI.nodeValue = "photo[]"; par nameI.nodeValue = "photo"+nbre_photos;

revoila le code :

Code : Tout sélectionner

<!--/*--><![CDATA[//> <!--

var nbre_photos=0;

function ajouter() {

//creation du sous-noeud Input File
var elem_input_photo = document.getElementById("input_photo");
var inputF = document.createElement("input");
var br = document.createElement("br");
var typeI = document.createAttribute("type");
typeI.nodeValue = "file";
inputF.setAttributeNode(typeI);
var nameI = document.createAttribute("name");
nameI.nodeValue = "photo"+nbre_photos;
inputF.setAttributeNode(nameI);
elem_input_photo.appendChild(br);
elem_input_photo.appendChild(inputF);

// Incrémentation de la variable nbre_photos
nbre_photos++;

document.getElementById("nbrephotos").value=nbre_photos;
}

function remove() {
document.getElementById("input_photo").removeChild(document.getElementById("input_photo").lastChild);
document.getElementById("input_photo").removeChild(document.getElementById("input_photo").lastChild);
nbre_photos--;
}


//--><!]]>
</script> 
<?
for ($j=0;$j<($nbre_photos);$j++)
      {
	echo "<br />";
	$bob = "photo".$j;
      
	$nom = "image_".$j.".jpg";
	rename($_FILES[$bob]['tmp_name'],$nom);
	
	echo '<img src="'.$nom.'"><br />';
}
?>

<form enctype="multipart/form-data" action="test2.php" method="post" >

<div id="input_photo">
</div>

<a href="javascript:ajouter()">Joindre un autre fichier</a>
<a href="javascript:remove()">Supprimer un fichier</a>


<input title="Type : submit" name="submit" type="submit" value="Envoyer"/></td>
<input title="Type : reset" name="reset" type="reset" value="Effacer"/></td>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<input id="nbrephotos" type="hidden" name="nbre_photos" value="0" />

</form>

et voilou.
le code php renome l'image (et donc la place sur le ftp) puis l'affiche.

uploader des fichiers à partir du même formulaire

Qui est en ligne