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?

Le script que tu as utilisé ?

Comme il ne fonctionnait pas je l'ai effacé....
Je sais, c'est le truc à pas faire...:oops:

Refais le et puis tu l'envoie on verra ce qui ne marche pas

D'accord merci, je m'y met

Rebonjour !

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

Code:

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:

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:

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

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?