Upload de photo

Fermé

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 - 10 août 2014 à 21:13
Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 - 16 oct. 2014 à 17:47

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.

A voir également:

Upload de photo
Photo de profil - Guide
Traduction photo gratuit - Guide
Photo aérienne de ma maison - Guide
Partage photo - Guide
Photo filtre gratuit - Télécharger - Retouche d'image

14 réponses

Réponse 1 / 14

Houe
11 août 2014 à 00:16

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).

Réponse 2 / 14

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
11 août 2014 à 01:08

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 ;/

Réponse 3 / 14

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
11 août 2014 à 19:56

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 :/

Réponse 4 / 14

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
2 sept. 2014 à 23:02

Petit up ?

--

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 14

Utilisateur anonyme
3 sept. 2014 à 07:27

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

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
3 sept. 2014 à 09:03

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 :/

--

Réponse 6 / 14

Utilisateur anonyme
3 sept. 2014 à 10:23

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

bonne journée

Rhydan1
3 sept. 2014 à 16:36

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

Réponse 7 / 14

Utilisateur anonyme
3 sept. 2014 à 18:52

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

Réponse 8 / 14

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
3 sept. 2014 à 19:23

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 :/)

Réponse 9 / 14

Utilisateur anonyme
Modifié par lobotoFix le 3/09/2014 à 23:27

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
3 sept. 2014 à 23:32

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
4 sept. 2014 à 09:06

bon sa a l'air ok cela devait venir de de l'hébergement...

Réponse 10 / 14

Utilisateur anonyme
6 sept. 2014 à 10:49

Salut, tu en est ou ? Tu as réussi ?

Réponse 11 / 14

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
6 sept. 2014 à 16:23

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 ;)

Réponse 12 / 14

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
14 oct. 2014 à 18:41

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 ^^

Réponse 13 / 14

Utilisateur anonyme
15 oct. 2014 à 19:26

salut, sa fait ca, l'image s'affiche direct sans rafraichissement

Réponse 14 / 14

Rhydan1 Messages postés 382 Date d'inscription jeudi 3 juillet 2014 Statut Membre Dernière intervention 2 avril 2017 70
16 oct. 2014 à 17:47

Ouais mais j'aimerai le modifier un peu, et que, au lieu de l'afficher, ça rafraîchisse la page... :/

Discussions similaires

Pix

logiciel de déshabillage de photo

Discussions similaires

Newsletters