Upload photos auto

boatran8 · 23/01/2012, 20h30

Bonjour,

je suis débutant en javascript, jquery et ajax.

Je développe un site dans lequel j'ai besoin d'uploader des photos. J'ai réussi à le faire en php mais je voudrais implémenter une fonction qui permet un upload automatique (donc sans bouton d'envoi, seulement le bouton parcourir).

Auriez-vous une solution à me proposer, sachant que je dois aussi écrire avec une requête mysql le nom du fichier dans ma base.

En gros, l'idéal aurait été de renvoyer un POST vers mon fichier d'upload ci-dessous après avoir sélectionné le fichier dans l'ordi, et sans avoir besoin d'un bouton envoi.

Merci!

andry.aime · 26/01/2012, 12h49

Bonjour,

Dans le onchange de ton input file, tu appelles une fonction qui submit ton formulaire dont son target est un iframe caché pour ne pas recharger la page, tu testes ensuite la contenue de l'iframe pour voir si le fichier est bien uploader ou non.

A+.

boatran8 · 27/01/2012, 18h36

Merci pour ta réponse. Je vais tester cela et je te tiens au courant.

A bientôt

boatran8 · 29/01/2012, 21h45

Bonjour,

J'ai adapté un script trouvé à cette adresse : http://net.tutsplus.com/tutorials/ja...les-with-ajax/

J'essaye de faire en sorte de ne télécharger qu'un fichier à la fois.

Il y a un bug car le résultat est "Sélectionnez un fichier SVP" comme si "file1" n'existait pas en POST, ou de format incorrect.

Est-ce que quelqu'un peut jeter un oeil svp?

Voici les sources :
upload.js

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
42
43
44
45
46
47
(function () {
	var input = document.getElementById("images"), 
							formdata = false;
 
 
 
	if (window.FormData) {
  		formdata = new FormData();
  		document.getElementById("bouton").style.display = "none";
	}
 
 	input.addEventListener("change", function (evt) {
 		document.getElementById("response").innerHTML = "Téléchargement . . ."
 		var i = 0, len = 0, img, reader, file;
 
		for ( ; i < len; i++ ) {
			file = this.files[i];
 
			if (!!file.type.match(/image.*/)) {
				if ( window.FileReader ) {
					reader = new FileReader();
					reader.onloadend = function (e) { 
						showUploadedItem(e.target.result, file.fileName);
					};
					reader.readAsDataURL(file);
				}
				if (formdata) {
					formdata.append("file1[]", file);
				}
			}	
		}
 
		if (formdata) {
			$.ajax({
				url: "../base/upload_modif.php",
				type: "POST",
				data: formdata,
				processData: false,
				contentType: false,
				success: function (res) {
					document.getElementById("response").innerHTML = res; 
formdata = new FormData();
				}
			});
		}
	}, false);
}());

upload_modif.php :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?php
include('../base/header.php');
 include('../base/connexion.php');
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../base/base.css" rel="stylesheet" type="text/css" />
</head>
 
<?php
 
//echo $_POST['file1'];
//echo $_POST['file2'];
 
if (isset($_POST['file1'])) {
 
 
if (($_FILES["file1"]["type"] == "image/jpeg")
//|| ($_FILES["file"]["type"] == "image/gif")
//|| ($_FILES["file"]["type"] == "image/pjpeg"))
//&& ($_FILES["file"]["size"] < 6000000)
)
  {
  if ($_FILES["file1"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file1"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file1"]["name"] . "<br />";
    echo "Type: " . $_FILES["file1"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file1"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file1"]["tmp_name"] . "<br />";
 if (file_exists("../base/img/photos/" . $_FILES["file1"]["name"]))
      {
      echo $_FILES["file1"]["name"] . " already exists. ";
 
      }
    else
      {
 
 
 
      move_uploaded_file($_FILES["file1"]["tmp_name"],
      "../base/img/photos/" . $_FILES["file1"]["name"]);
      echo "Stored in: " . "../base/img/photos/" . $_FILES["file1"]["name"];
 
    include('../var/var_site.php');
       // connexion à la base
$db = mysql_connect(serveurbase, loginbase, pwdbase)  or die('Erreur de connexion '.mysql_error());
// sélection de la base  
 
  mysql_select_db(nombase, $db)  or die('Erreur de sélection '.mysql_error());
//echo $num;
 
 
$sql = "UPDATE objets SET path_photo_1='".$_FILES["file1"]["name"]."' WHERE id_objet=$num";
echo $sql;
$result = mysql_query($sql,$db);
//echo $result;
 
 
//header('Location: ../base/modification.php?num='.$num.'');
      }
    }
  }
else
  {
  echo "Invalid file";
//header('Location: ../base/modification.php?num='.$num.'');
  }
 
} else if (isset($_POST['file2'])) {
 
if (($_FILES["file2"]["type"] == "image/jpeg")
//|| ($_FILES["file"]["type"] == "image/gif")
//|| ($_FILES["file"]["type"] == "image/pjpeg"))
//&& ($_FILES["file"]["size"] < 6000000)
)
  {
  if ($_FILES["file2"]["error"] > 0)
    {
    echo "Return Code: " . $_FILES["file2"]["error"] . "<br />";
    }
  else
    {
    echo "Upload: " . $_FILES["file2"]["name"] . "<br />";
    echo "Type: " . $_FILES["file2"]["type"] . "<br />";
    echo "Size: " . ($_FILES["file2"]["size"] / 1024) . " Kb<br />";
    echo "Temp file: " . $_FILES["file2"]["tmp_name"] . "<br />";
 if (file_exists("../base/img/photos/" . $_FILES["file2"]["name"]))
      {
      echo $_FILES["file2"]["name"] . " already exists. ";
 
 
      }
    else
      {
 
 
 
      move_uploaded_file($_FILES["file2"]["tmp_name"],
      "../base/img/photos/" . $_FILES["file2"]["name"]);
      echo "Stored in: " . "../base/img/photos/" . $_FILES["file2"]["name"];
 
    include('../var/var_site.php');
       // connexion à la base
$db = mysql_connect(serveurbase, loginbase, pwdbase)  or die('Erreur de connexion '.mysql_error());
// sélection de la base  
 
  mysql_select_db(nombase, $db)  or die('Erreur de sélection '.mysql_error());
//echo $num;
 
 
$sql = "UPDATE objets SET path_photo_2='".$_FILES["file2"]["name"]."' WHERE id_objet=$num";
echo $sql;
$result = mysql_query($sql,$db);
//echo $result;
 
 
//header('Location: ../base/modification.php?num='.$num.'');
      }
    }
  }
else
  {
  echo "Invalid file";
 
  }
 
}
else {echo "Sélectionnez un fichier SVP";
 
}
?> 
 
<?php include ('../piwik_tracker.php'); ?>

le formulaire initiant la requête:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form action='../base/upload_modif.php' method='POST' enctype='multipart/form-data'>
  <input type='file' name='file1' id='images' />  
            <button type='submit' id='bouton' >Envoi</button>
 
</form>

Merci

boatran8 · 29/01/2012, 22h12

Je confirme : j'obtiens l'erreur php :

Citation:

Notice : Undefined index : file1 .......

Je ne vois pas vraiment où est l'erreur!

23/01/2012, 20h30	#1
boatran8 Invité de passage Inscription : janvier 2012 Messages : 14 Détails du profil Informations forums : Inscription : janvier 2012 Messages : 14 Points : 1 Points : 1	Upload photos auto Bonjour, je suis débutant en javascript, jquery et ajax. Je développe un site dans lequel j'ai besoin d'uploader des photos. J'ai réussi à le faire en php mais je voudrais implémenter une fonction qui permet un upload automatique (donc sans bouton d'envoi, seulement le bouton parcourir). Auriez-vous une solution à me proposer, sachant que je dois aussi écrire avec une requête mysql le nom du fichier dans ma base. En gros, l'idéal aurait été de renvoyer un POST vers mon fichier d'upload ci-dessous après avoir sélectionné le fichier dans l'ordi, et sans avoir besoin d'un bouton envoi. Merci!
	00

26/01/2012, 12h49	#2
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 148 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 148 Points : 7 295 Points : 7 295	Bonjour, Dans le onchange de ton input file, tu appelles une fonction qui submit ton formulaire dont son target est un iframe caché pour ne pas recharger la page, tu testes ensuite la contenue de l'iframe pour voir si le fichier est bien uploader ou non. A+.
	00

27/01/2012, 18h36	#3
boatran8 Invité de passage Inscription : janvier 2012 Messages : 14 Détails du profil Informations forums : Inscription : janvier 2012 Messages : 14 Points : 1 Points : 1	Merci pour ta réponse. Je vais tester cela et je te tiens au courant. A bientôt
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email