Sujet Précédent Sujet Suivant

Afficher une photo à partir d'un fichier

Fermé
Cloclo - 23 juil. 2021 à 11:01
 Cloclo - 26 juil. 2021 à 15:16
Bonjour,
Je voudrai afficher l'image du fichier que j'ai chargé dans le tableau html mais cela ne marche pas. Je ne connais pas de d=fonction s d'affichage avec input.
Je vous laisse mon code ;) 


<table border="1"; style="width: 650px; height: 150px;"> <caption><strong> Description </strong></caption>
	<tbody>
        <tr>
				<th style="width: 150px; text-align: left"; colspan="2"; bgcolor="#ffff66"><strong>Avis du M2E</strong></th>
			<td>
				<input type="text"; class="heighttext"; style="width: 500px" id="name">
			</td>
		</tr>
		<tr>
				<th style="text-align: left"; colspan="2"; bgcolor="#ffff66"><strong>Usage</strong></th>
			<td colspan="4">	
				<input type="text"; class="heighttext"; style="width: 500px" id="name">
			</td>
		</tr>
		<tr>
				<th style="text-align: left"; colspan="2"; bgcolor="#ffff66"><strong>Note</strong></th>
			<td>
				<input type="text"; class="heighttext"; style="width: 500px" id="name">
			</td>	
        </tr>
		<tr>
				<th style="text-align: left"; colspan="2"; bgcolor="#ffff66"><strong>Référence</strong></th>
			<td>
				<input type="text"; class="heighttext"; style="width: 500px" id="name">
			</td>
		</tr>
		<tr>
				<th style="text-align: left"; colspan="2"; bgcolor="#ffff66"><strong>Constructeur</strong></th>
			<td>
				<input type="text"; class="heighttext"; style="width: 500px" id="name">
			</td>
		</tr>
		<tr>
				<th style="text-align: left"; colspan="2"; bgcolor="#ffff66"><strong>Photo</strong></th>
			<td>
				<input type="file"; style="width: 500px" id="Fichier">
			</td>
		</tr>
    </tbody>



Merci d'avance


Configuration: Windows / Edge 91.0.864.71

2 réponses

Réponse 1 / 2
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
23 juil. 2021 à 12:15
Bonjour,

Si l'objectif est d'afficher l'image dès que l'utilisateur sélectionne une image dans le champ input file (donc sans soumettre le formulaire et/ou uploader l'image), on peut utiliser FileReader() en javascript pour lire le contenu de l'image sélectionnée et créer une balise img pour afficher cette image.

Un exemple sur la documentation dev Mozilla : https://developer.mozilla.org/fr/docs/Web/API/File/Using_files_from_web_applications#exemple_afficher_les_miniatures_d'images_s%C3%A9lectionn%C3%A9es_par_l'utilisateur

Un début de code en reprenant l'exemple de la documentation : https://jsfiddle.net/8tdvome6/

Bonne journée,
1
Réponse 2 / 2
Cloclo
26 juil. 2021 à 15:16
Merci beaucoup pour votre aide. Cependant, je fais face à un autre problème car je fais ce programme sur WordPress afin de mettre en forme un tableau interactif avec <input>. Je code donc en HTML et je n'arrive pas à intégrer des programmes en Javascrpit sur WordPress. Je ne sais pas si vous vous y connaissez mais sur mon programme cela m'empêche de faire plusieurs choses...
0

Discussions similaires

comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses