Upload de photo

Rhydan1 Messages postés 438 Statut Membre -  
Rhydan1 Messages postés 438 Statut Membre -
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

  1. 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
  2. Rhydan1 Messages postés 438 Statut Membre 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
  3. Rhydan1 Messages postés 438 Statut Membre 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
  4. Rhydan1 Messages postés 438 Statut Membre 70
     
    Petit up ?

    --
    0

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

    Posez votre question
  6. 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
    1. Rhydan1 Messages postés 438 Statut Membre 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
  7. Utilisateur anonyme
     
    salut, ton bouton doit être un input et non un button.

    bonne journée
    0
    1. Rhydan1
       
      Oui mais comment faire pour lui donner une image alors ? Je ne veux pas d'un simple bouton :/
      0
  8. 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
  9. Rhydan1 Messages postés 438 Statut Membre 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
  10. 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
    1. 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
    2. Utilisateur anonyme
       
      bon sa a l'air ok cela devait venir de de l'hébergement...
      0
  11. Utilisateur anonyme
     
    Salut, tu en est ou ? Tu as réussi ?
    0
  12. Rhydan1 Messages postés 438 Statut Membre 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
  13. Rhydan1 Messages postés 438 Statut Membre 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
  14. Utilisateur anonyme
     
    salut, sa fait ca, l'image s'affiche direct sans rafraichissement
    0
  15. Rhydan1 Messages postés 438 Statut Membre 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