HTML: Copiez les champs de formulaire dans un autre formulaire, y compris le champ de saisie FILE?

Je suis venu voir que la valeur du champ de saisie du fichier de formulaire ne peut pas être définie avec javascript pour des raisons de sécurité.

Je veux simplement copier une entrée FILE à un autre formulaire et l'afficher, j'ai cherché un travail et je n'ai rien trouvé, est-ce possible?

MISE À JOUR: mon code:

function prepareUpload( filevalue ){ document.getElementById('logo').value =filevalue; var mform = document.getElementById('sleeker'); ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload... } <input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" /> <form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;"> <p><input type="hidden" name="logo" id="logo" /></p> </form>

Quelque chose d'autre que l'entrée de fichier fonctionne bien, et je pourrais recevoir avec $ _POST, mais $ _FILES n'a pas de valeurs. Et ce code fonctionne très bien aussi. Je pense que ce coefficient est suffisant?

Oui, vous pouvez placer <input type="file"> dehors de votre formulaire HTML, puis utiliser l'événement onChange pour remplir un <input type="hidden"> sous la forme qui est affiché:

 <input type="file" onchange="document.getElementById('hidden_file').value = this.value;" /> <form method="POST"> <input type="hidden" id="hidden_file" value="" /> <input type="submit" /> </form>

Cependant, dans les navigateurs modernes, vous ne pourrez accéder au nom du fichier et non au chemin d'accès complet. Vous voudrez peut-être vérifier les messages de débordement de pile suivants pour plus d'informations sur ce sujet:

Impossible d'obtenir l'adresse complète lors du téléchargement d'un fichier
Comment obtenir le chemin du fichier à partir du formulaire de saisie HTML dans Firefox 3

METTRE À JOUR:

La question initiale m'a fait penser que vous n'aviez besoin que de copier le "nom de fichier" vers un autre formulaire HTML, et non la représentation entière <input type="file"> .

En plus de la mise à jour, je suppose que vous vouliez dire quelque chose comme ceci:

 <input type="file" onchange="document.getElementById('hidden_file').value = this.value;" /> <form method="POST"> <input type="file" id="hidden_file" value="" /> <input type="submit" /> </form>

Malheureusement, ce qui précède ne fonctionne pas. Firefox renverra "Security error code: 1000" si vous essayez l'exemple ci-dessus.

En ce qui concerne certaines solutions de rechange, vous pouvez consulter les suggestions de David Dorward :

Utilisation de cloneNode
Déplacement du champ de saisie avec appendChild avant de soumettre le formulaire

Vous pouvez déplacer l'entrée du fichier vers l'autre formulaire (avec appendChild ou insertBefore), soumettre le formulaire, puis le déplacer.

Je n'ai pas testé ceci en profondeur, mais il semble fonctionner dans Firefox.

Utiliser cloneNode

 var copy = file_input.cloneNode(1); form2.appendChild(copy);

Très similaire à cloneNode sauf dans jQuery

Dans un navigateur xulrunner (comme firefox), j'ai utilisé avec succès quelque chose comme suit:

 $('input:file').clone().appendTo($('#mainform'));

Cela devrait copier tous les objets d'entrée de fichier dans le formulaire avec id = mainform.

Évitez d'utiliser l'attribut id dans les objets à cloner. L'ID devrait toujours être unique.

Je me suis rendu compte que cela pourrait être tard pour la fête, mais avec HTML5, vous pouvez utiliser l'attribut "forme" pour cibler un formulaire, comme [form id = "the_form"] … [/ form] …. [input Form = "the_form type =" file "… /]