Upload de photo

[Fermé]
Signaler
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
-
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
-
Bonjour,

Je suis actuellement en train de développer une sorte de "mini réseau social" et je bloque sur un point : Je souhaite upload des photo en javascript. Mais, disons, à la manière Facebook. Par exemple, je clique sur la petite image d'un appareil photo, une fenêtre de sélection de fichier apparaît, et dès qu'on sélectionne ce que l'on souhaite, ça l'envoi directement.
Je ne suis pas très très doué en Javascript :/

Merci d'avance,
Cordialement.

14 réponses

Salut,
l'upload(ou téléchargement montant) c'est envoyer un fichier sur le serveur du site.
Javascript ne fonctionne que sur l'ordinateur par le navigateur. Ce qui fait qu'il n'est pas possible d'envoyer de fichier(il ne fonctionne que sur l'ordinateur du visiteur).

Éventuellement il faut utiliser AJAX ou plus simple PHP.
Voilà pour l'envoi.

Pour faire une galerie d'image qui se gére automatiquement(actualisable/ages dynamiques) il faut utiliser une base de données qui va inscrire l'emplacement ou sont enregistrés les fichiers sur le serveur(par l'upload).

Pour ça vous pouvez utiliser un programme de CMS ou apprendre les technologies du web.

PHP(pour contacter la base de donnée), SQL(pour les bases de données) et HTMLCSS (affichage de la page).
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
68
Bonsoir, merci de votre réponse aussi rapide, donc si je comprend bien, je dois me tourner vers AJAX ? Après, je ne demande pas que la page ne se recharge pas, je souhaiterai juste que la photo s'envoie directement quand l'utilisateur l'a sélectionnée. Pour tout ce qui est Html/CSS/PHP/SQL je connais, y'a pas de soucis. Y'a seulement AJAX qui est inconnu pour moi ;/
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
68
Pour que ma demande soit plus claire, voilà ce qui se passe :

http://sky-project.t15.org/upload/UpPhoto-1.png (Ici je clique sur le bouton)

http://sky-project.t15.org/upload/UpPhoto-2.png (Et là l'erreur apparait)

Voici mon code :

<form method="POST" action="UploadImg.php" enctype="multipart/form-data">
     <input type="hidden" name="MAX_FILE_SIZE" value="10000000">
		<button type="file" name="[/contents/1315-chat avatar]" style="width: 70px; height: 90px; position: absolute; right: 30px; top: 20px;">
			<img src="Images/AppareilPhoto.png" />
		</button>
	</form>	


Voilà, la fenêtre de séléction n'apparait plus dès que j'ai mis ce fameux
<button type="file" name="avatar" style="width: 70px; height: 90px; position: absolute; right: 30px; top: 20px;">
			<img src="Images/AppareilPhoto.png" />
		</button>


Du coup je sais plus quoi faire :/
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
68
Petit up ?

--

Salut, il faut passer par Ajax et une iframe

https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641

https://openclassrooms.com/fr/courses/245710-ajax-et-lechange-de-donnees-en-javascript/245253-iframe-loading

bonne journée
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
68
Merci beaucoup, mais pourquoi ne m'ouvre-t-il plus de fenêtre de sélection de fichier ? Je clique dessus et hop, directement sur la page qui traite l'upload :/

--

salut, ton bouton doit être un input et non un button.

bonne journée
Oui mais comment faire pour lui donner une image alors ? Je ne veux pas d'un simple bouton :/

Salut, si tu utilise Ajax tu peux mettre un input type image et simuler au click l'ouverture du dossier personnel (jamais essayé)

Sinon tu met ton input dans un div. Tu met un background de ton image dans le div et tu met opacity 0 sur l'input

"exemple :

<style>
			#img {
				background: url(image.png) no-repeat;
				width: 70px;
				height: 90px;
				position: absolute;
				right: 30px;
				top: 20px;
			}
			input[type=file] {
				width: 70px;
				height: 90px;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<form method="POST" action="UploadImg.php" enctype="multipart/form-data">
			<input type="hidden" name="MAX_FILE_SIZE" value="10000000">
			<div id="img">
				<input type="file" name="[/contents/1315-chat avatar]" />
			</div>
		</form>
	</body>


pour la compatibilité :
https://css-tricks.com/css-transparency-settings-for-all-broswers/

bonne journée
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
68
Merci beaucoup, mais ensuite, dès que l'utilisateur a séléctionné son fichier, comment faire pour que l'envoi s'effectue automatiquement ?
(Désolé de tout ces questions, je ne connais pas du tout AJAX :/)
Salut,

j'ai fait un test que tu peux voir ici :

http://bencesticiquetudoiscliquer.bl.ee/upl/

en fait avec onchange sur l'input file je valide le formulaire.

je me suis inspiré de ce tuto :

https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641

tu peux avoir le code ici si tu veux :

http://bencesticiquetudoiscliquer.bl.ee/upl/zip.zip

bonne chance

׺°"~'"°º×]|I{*------» LÖBÖTÖ «------*}I|[׺°"~'"°º×
Utilisateur anonyme
ha ben je sais pas si c'est le serveur qui deconne (c'est du gratuit) ou si c'est mon code mais les pages rame et ne chargent pas.

je vais me coucher, je verrai demain
Utilisateur anonyme
bon sa a l'air ok cela devait venir de de l'hébergement...

Salut, tu en est ou ? Tu as réussi ?
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
68
Salut ! Je te remercie beaucoup pour tes réponses, mais en ce moment, je n'ai pas mon PC avec moi, donc je te recontacterai dans quelques jours ! ;)
Encore merci ;)
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
68
Salut LobotoFix, ça y'est j'ai mis ton script, il fonctionne à merveille, seul soucis : J'aimerai bien que cela rafraichisse la page dès que ça envoyé l'image, histoire de la voir directement. Petite ligne à rajouter, mais où, la est la question ^^

salut, sa fait ca, l'image s'affiche direct sans rafraichissement
Messages postés
382
Date d'inscription
jeudi 3 juillet 2014
Statut
Membre
Dernière intervention
2 avril 2017
68
Ouais mais j'aimerai le modifier un peu, et que, au lieu de l'afficher, ça rafraîchisse la page... :/