Upload de photo

Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   -  
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   -
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:

14 réponses

Réponse 1 / 14
Houe
 
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).
0
Réponse 2 / 14
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
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 ;/
0
Réponse 3 / 14
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
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 :/
0
Réponse 4 / 14
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
Petit up ?

--
0

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

Posez votre question
Réponse 5 / 14
Utilisateur anonyme
 
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
0
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
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 :/

--
0
Réponse 6 / 14
Utilisateur anonyme
 
salut, ton bouton doit être un input et non un button.

bonne journée
0
Rhydan1
 
Oui mais comment faire pour lui donner une image alors ? Je ne veux pas d'un simple bouton :/
0
Réponse 7 / 14
Utilisateur anonyme
 
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
0
Réponse 8 / 14
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
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 :/)
0
Réponse 9 / 14
Utilisateur anonyme
 
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|[׺°"~'"°º×
0
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
0
Utilisateur anonyme
 
bon sa a l'air ok cela devait venir de de l'hébergement...
0
Réponse 10 / 14
Utilisateur anonyme
 
Salut, tu en est ou ? Tu as réussi ?
0
Réponse 11 / 14
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
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 ;)
0
Réponse 12 / 14
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
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 ^^
0
Réponse 13 / 14
Utilisateur anonyme
 
salut, sa fait ca, l'image s'affiche direct sans rafraichissement
0
Réponse 14 / 14
Rhydan1 Messages postés 391 Date d'inscription   Statut Membre Dernière intervention   70
 
Ouais mais j'aimerai le modifier un peu, et que, au lieu de l'afficher, ça rafraîchisse la page... :/
0

Discussions similaires

Dissocier les photos de ma galerie sur Google Photos
BourrinOman83 -
Pierr10 -

9 réponses