IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Script upload d'image


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2020
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2020
    Messages : 7
    Points : 4
    Points
    4
    Par défaut Script upload d'image
    Bonjour, je suis en train de créer un site web ayant pour but d'appliquer des filtres css sur une image.
    J'aimerais créer un script JavaScript permettant à l'utilisateur d'uploader l'image qui sera conservée temporairement dans un dossier du site. Le script redirigera ensuite l'utilisateur vers la page web dite de "retouche". sur cette page, un autre script récupèrera l'image précédemment uploadée du dossier puis affichée à l'écran. Elle devra pouvoir être modifiable.

    Mon problème c'est que je n'arrive pas à créer un script qui upload l'image puis l'enregistre dans un dossier sans l'afficher dessuite à l'écran. Ni à faire une redirection d'ailleurs. Tout ce que j'arrive à faire c'est à écrire les lignes permettant d'uploader une image et de l'afficher (chose que j'ai apprise dans un livre d'apprentissage JS )

    Pouvez-vous m'aider à écrire mon script s'il-vous-plaît?

  2. #2
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2020
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2020
    Messages : 13
    Points : 18
    Points
    18
    Par défaut
    Le script que tu as utilisé ?

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2020
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2020
    Messages : 7
    Points : 4
    Points
    4
    Par défaut
    Comme il ne fonctionnait pas je l'ai effacé....
    Je sais, c'est le truc à pas faire...

  4. #4
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2020
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 27
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2020
    Messages : 13
    Points : 18
    Points
    18
    Par défaut
    Refais le et puis tu l'envoie on verra ce qui ne marche pas

  5. #5
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2020
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2020
    Messages : 7
    Points : 4
    Points
    4
    Par défaut
    D'accord merci, je m'y met

  6. #6
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2020
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2020
    Messages : 7
    Points : 4
    Points
    4
    Par défaut
    Rebonjour !

    Bon, j'ai réécrit mon code:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    var depose=document.getElementById("depose");
    depose.addEventListener("click", function(evt) {
       evt.preventDefault();
       document.getElementById("file").click();
    });
    depose.addEventListener("dragover", function(evt) {
       evt.preventDefault(); /* Pour autoriser le drop par JS */
    });
    depose.addEventListener("dragenter", function(evt) {
       this.className="onDropZone"; /* Passe en surbrillance */
    });
    depose.addEventListener("dragleave", function(evt) {
       this.className=""; /* La surbrillance s'efface */
    });
    depose.addEventListener("drop", function(evt) {
       evt.preventDefault();
       /* Tranfert de la liste des fichiers du drag and drop dans input file */
       document.getElementById("file").files=evt.dataTransfer.files;
       this.className=""; /* Surbrillance supprimée */
    });
     
     // À partir d'ici ça fonctionne plus ou moins
     
    document.getElementById("file").addEventListener("change", function(evt){
       var p=document.getElementById("preview"); /* Bloc d'affichage fichiers */
       p.innerHTML=""; /* Effacer le contenu initial de #preview */
       for (var i=0; i<this.files.length; i++) {
          var f=this.files[i];
          var div=document.createElement("div");
          div.className="fichier";
          var span=document.createElement("span");
          span.innerHTML=f.name+" ("+getHumanSize(f.size)+")";
          var vignette=document.createElement("img");
          vignette.src = window.URL.createObjectURL(f);
          /* Attacher les éléments HTML au DOM */
          div.appendChild(vignette);
          div.appendChild(span);
          p.appendChild(div);
       }
       p.style.display="block";
    });
    J'ai écrit un code classique d'upload d'image, l'utilisateur clique puis choisi sont image. Cependant, l'image n'est pas affichée (chose que je voulais) mais je ne sais pas comment l'enregistrer temporairement dans un dossier pour la récupérer dans une autre page.
    Ensuite, j'ai voulu "styliser" un peu en créant un drag and drop, donc j'ai repris mes cours et j'ai créé le code qu'il faut, l'interface a été stylisée avec du css . Mais quand je passe la souris dessus le curseur change disant qu'il est possible de cliquer mais rien ne se passe, impossible de glisser déposer une image également. Je pense que ça a voir avec la première partie de mon code mais je ne vois pas quoi.

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    #depose {
      height:80px;
      font-size:20px;
      line-height: 80px;
      color:#999;    
      text-align: center;
      padding:10px;
      margin:10px;
      border:2px dashed #999;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
    }    
    #depose.onDropZone {
      color:#000;
      border:5px solid #6f6;
      padding:7px;
    }    
     
    .bloc {
        padding:5px;
        border:1px solid #aaa;
        margin:10px;
    }
    #preview {
      display:none;
    }
    .fichier {
      padding:5px;
      background: #ccc;    
      margin-top:1px;
    }
    .fichier img {
      max-height: 80px;
      max-width: 80px;
      margin-right:10px;
      vertical-align: middle;
    }

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html>
        <head>
     
            <meta charset="utf-8" />
           	<link href="mainStyle.css" rel="stylesheet" />
     
     
        </head>
        <body>
     
    		<?php
                    include("header.php");
                    ?>
     
    		<?php
                    include("menu.php");
                    ?>
    		<div class="corps_Upload">
    			<div id="depose">Déposez vos images ou cliquez pour les choisir</div>
    			<input type="file" name="monFichier" id="file" method="post" enctype="multipart/form-data" accept="image/*" required multiple style="display:none"/>
     
     
    			<?php
                            include("footer.php") 
                                    ?>
    		</div>
     
     
     
     
        </body>
     
    </html>
    Honnêtement je sèche...

  7. #7
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2020
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2020
    Messages : 7
    Points : 4
    Points
    4
    Par défaut Up
    Bonjour,

    Je me demande si la création d'une base de donnée pourrait m'être utile pour résoudre mon problème. Si oui, y a t-il un language spécial à utiliser?

Discussions similaires

  1. Script d'upload d'image obscure !
    Par titimoi dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 15/01/2012, 22h09
  2. Script Upload Images?
    Par jojo86 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 0
    Dernier message: 05/07/2011, 19h30
  3. [Forum] Script upload + redimensionnement image jpg
    Par baleiney dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 6
    Dernier message: 03/07/2006, 12h27
  4. Besoin d'aide pour faire fonctionner un Script d'upload d'images
    Par PaoOo dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 5
    Dernier message: 15/06/2006, 22h24
  5. [Upload] Script upload images
    Par Myriamrv dans le forum Langage
    Réponses: 14
    Dernier message: 07/12/2005, 19h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo