[AJAX] Upload photos auto

**boatran8** · 23/01/2012, 21h30

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, 13h49

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, 19h36

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

A bientôt

**boatran8** · 29/01/2012, 22h45

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