upload script in php binnen jquery mobile website
Zoals enkelen onder jullie al weten ben ik bezig met een mobiele web app te maken. Nu heb ik dus even alles om gegooid en sla ik mijn afbeeldingen op de server op ipv in de database onder een blob.
Mijn script doet wat het moet doen, tot dat ik mijn code effectief in mijn app plaats.
Ik had dus eerst een bestandje apart gemaakt waarin ik mijn upload script heb geschreven en deze doet het perfect.
Nu copy paste ik deze code naar mijn effectieve website maar vanaf dan loopt het mis, mijn $_FILES variabele blijft om een of andere reden leeg. Het enige wat veranderd is is de action van mijn form zelf.
Nu zoals je hieronder zult zien geef ik daar ook nog een get variabele mee die ik effectief nodig blijf hebben, maar om te debuggen had ik dit dus ook al veranderd naar app.php maar dat geeft het zelfde resultaat.
werkende file:
Code (php)
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
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
<?php
$melding = '';
if(isset($_POST["upload-image"])) {
$connect = new mysqli('localhost', 'root', 'root', 'ioutfit');
$melding = "send";
$folder = "uploads";
$inputSeisoon = $_POST['seisoon'];
$image_name = $_FILES['myfile']['name'];
$image_type = $_FILES['myfile']['type'];
$image_size = $_FILES['myfile']['size'];
$image_tmp_name = $_FILES['myfile']['tmp_name'];
$path = $folder . "/" . $image_name;
if($image_name == '') {
$melding = "gelieve een foto te selecteren";
}
else {
move_uploaded_file($image_tmp_name, "uploads/$image_name");
$query = "INSERT INTO tblFotos (FK_userID, foto, seisoon) VALUES ('1', '" . $path . "','" . $inputSeisoon . "')";
$result = mysqli_query($connect, $query);
$melding = "succesvol geupload ga maar kijken!!!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<?php echo $melding; ?>
<form method="post" action="test.php" enctype="multipart/form-data">
<input id="myfile" name="myfile" type="file" accept="image/*;capture=camera">
<input id="seisoon" name="seisoon" type="text" />
<input type="submit" id="upload-image" name="upload-image" value="Upload" />
</form>
</body>
</html>
$melding = '';
if(isset($_POST["upload-image"])) {
$connect = new mysqli('localhost', 'root', 'root', 'ioutfit');
$melding = "send";
$folder = "uploads";
$inputSeisoon = $_POST['seisoon'];
$image_name = $_FILES['myfile']['name'];
$image_type = $_FILES['myfile']['type'];
$image_size = $_FILES['myfile']['size'];
$image_tmp_name = $_FILES['myfile']['tmp_name'];
$path = $folder . "/" . $image_name;
if($image_name == '') {
$melding = "gelieve een foto te selecteren";
}
else {
move_uploaded_file($image_tmp_name, "uploads/$image_name");
$query = "INSERT INTO tblFotos (FK_userID, foto, seisoon) VALUES ('1', '" . $path . "','" . $inputSeisoon . "')";
$result = mysqli_query($connect, $query);
$melding = "succesvol geupload ga maar kijken!!!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<?php echo $melding; ?>
<form method="post" action="test.php" enctype="multipart/form-data">
<input id="myfile" name="myfile" type="file" accept="image/*;capture=camera">
<input id="seisoon" name="seisoon" type="text" />
<input type="submit" id="upload-image" name="upload-image" value="Upload" />
</form>
</body>
</html>
Code van mijn mobile web app (app.php)
Code (php)
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
142
143
144
145
146
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
142
143
144
145
146
<?php
//temperatuur opvalen, verwerken en fouten opvangen.
$temperatuur = '';
$temperatuurErrorMessage = '';
$seisoon = '';
if(isset($_GET["q"])) {
$temperatuur = $_GET["q"];
switch ($temperatuur) {
case $temperatuur >= -40 && $temperatuur <= 10:
$seisoon = "winter";
//$_SESSION['ioutfit'] = $seisoon;
//echo $seisoon;
break;
case $temperatuur >= 11 && $temperatuur <= 15:
$seisoon = "herfst";
//$_SESSION['ioutfit'] = $seisoon;
//echo $seisoon;
break;
case $temperatuur >= 16 && $temperatuur <= 22:
$seisoon = "lente";
//$_SESSION['ioutfit'] = $seisoon;
//echo $seisoon;
break;
case $temperatuur >= 22 && $temperatuur <= 50:
$seisoon = "zomer";
//$_SESSION['ioutfit'] = $seisoon;
//echo $seisoon;
break;
default:
$temperatuurErrorMessage = "Er is iets misgelopen bij de temperatuur, ofwel is het kouder dan -40 graden ofwel is het warmer als 50 graden.";
break;
}
}
else {
$temperatuurErrorMessage = "Sorry er is iets misgelopen met het doorgeven van de temperatuur. Gelieve de app opnieuw te starten";
}
//het uploaden van een foto naar de database
$melding = '';
if(isset($_POST["upload-image"])) {
$connect = new mysqli('localhost', 'root', 'root', 'ioutfit');
$melding = "send";
$folder = "uploads";
$inputSeisoon = $_POST['seisoon'];
$image_name = $_FILES['myfile']['name'];
$image_type = $_FILES['myfile']['type'];
$image_size = $_FILES['myfile']['size'];
$image_tmp_name = $_FILES['myfile']['tmp_name'];
$path = $folder . "/" . $image_name;
if($image_name == '') {
$melding = "gelieve een foto te selecteren";
}
else {
move_uploaded_file($image_tmp_name, "uploads/$image_name");
$query = "INSERT INTO tblFotos (FK_userID, foto, seisoon) VALUES ('1', '" . $path . "','" . $inputSeisoon . "')";
$result = mysqli_query($connect, $query);
$melding = "succesvol geupload ga maar kijken!!!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gshake.js"></script>
<!--<script src="js/app.js"></script>-->
<script>
$(this).gShake(function() {
$(".image").empty();
$("#shake-instructions").empty();
var image = $.ajax({
type: "GET",
url: 'sql.php?q=<?php echo $seisoon; ?>' , async: false
}).responseText;
$(".image").append(image);
});
</script>
<title>Ioutfit</title>
</head>
<body>
<div data-role="page" id="home">
<header data-role="header">
<h1>Ioutfit</h1>
</header>
<article data-role="content">
<p class="errors">
<?php
echo $temperatuur;
echo $temperatuurErrorMessage;
echo $melding;
var_dump($_FILES);
//echo $image_name;
?>
</p>
<div class="image"></div>
<p id="shake-instructions">
Shake you're device for a random outfit
</p>
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">home</a></li>
<li><a href="#upload" data-icon="grid">Browse</a></li>
</ul>
</nav>
</footer>
</div>
<div data-role="page" id="upload">
<header data-role="header">
<h1>Ioutfit</h1>
</header>
<article data-role="content">
<?php echo $melding; ?>
<form method="post" action="app.php?q=<?php echo $temperatuur ?>" enctype="multipart/form-data">
<input id="myfile" name="myfile" type="file" accept="image/*;capture=camera">
<input id="seisoon" name="seisoon" type="text" />
<input type="submit" id="upload-image" name="upload-image" value="Upload" />
</form>
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">home</a></li>
<li><a href="#upload" data-icon="grid">Browse</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
//temperatuur opvalen, verwerken en fouten opvangen.
$temperatuur = '';
$temperatuurErrorMessage = '';
$seisoon = '';
if(isset($_GET["q"])) {
$temperatuur = $_GET["q"];
switch ($temperatuur) {
case $temperatuur >= -40 && $temperatuur <= 10:
$seisoon = "winter";
//$_SESSION['ioutfit'] = $seisoon;
//echo $seisoon;
break;
case $temperatuur >= 11 && $temperatuur <= 15:
$seisoon = "herfst";
//$_SESSION['ioutfit'] = $seisoon;
//echo $seisoon;
break;
case $temperatuur >= 16 && $temperatuur <= 22:
$seisoon = "lente";
//$_SESSION['ioutfit'] = $seisoon;
//echo $seisoon;
break;
case $temperatuur >= 22 && $temperatuur <= 50:
$seisoon = "zomer";
//$_SESSION['ioutfit'] = $seisoon;
//echo $seisoon;
break;
default:
$temperatuurErrorMessage = "Er is iets misgelopen bij de temperatuur, ofwel is het kouder dan -40 graden ofwel is het warmer als 50 graden.";
break;
}
}
else {
$temperatuurErrorMessage = "Sorry er is iets misgelopen met het doorgeven van de temperatuur. Gelieve de app opnieuw te starten";
}
//het uploaden van een foto naar de database
$melding = '';
if(isset($_POST["upload-image"])) {
$connect = new mysqli('localhost', 'root', 'root', 'ioutfit');
$melding = "send";
$folder = "uploads";
$inputSeisoon = $_POST['seisoon'];
$image_name = $_FILES['myfile']['name'];
$image_type = $_FILES['myfile']['type'];
$image_size = $_FILES['myfile']['size'];
$image_tmp_name = $_FILES['myfile']['tmp_name'];
$path = $folder . "/" . $image_name;
if($image_name == '') {
$melding = "gelieve een foto te selecteren";
}
else {
move_uploaded_file($image_tmp_name, "uploads/$image_name");
$query = "INSERT INTO tblFotos (FK_userID, foto, seisoon) VALUES ('1', '" . $path . "','" . $inputSeisoon . "')";
$result = mysqli_query($connect, $query);
$melding = "succesvol geupload ga maar kijken!!!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gshake.js"></script>
<!--<script src="js/app.js"></script>-->
<script>
$(this).gShake(function() {
$(".image").empty();
$("#shake-instructions").empty();
var image = $.ajax({
type: "GET",
url: 'sql.php?q=<?php echo $seisoon; ?>' , async: false
}).responseText;
$(".image").append(image);
});
</script>
<title>Ioutfit</title>
</head>
<body>
<div data-role="page" id="home">
<header data-role="header">
<h1>Ioutfit</h1>
</header>
<article data-role="content">
<p class="errors">
<?php
echo $temperatuur;
echo $temperatuurErrorMessage;
echo $melding;
var_dump($_FILES);
//echo $image_name;
?>
</p>
<div class="image"></div>
<p id="shake-instructions">
Shake you're device for a random outfit
</p>
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">home</a></li>
<li><a href="#upload" data-icon="grid">Browse</a></li>
</ul>
</nav>
</footer>
</div>
<div data-role="page" id="upload">
<header data-role="header">
<h1>Ioutfit</h1>
</header>
<article data-role="content">
<?php echo $melding; ?>
<form method="post" action="app.php?q=<?php echo $temperatuur ?>" enctype="multipart/form-data">
<input id="myfile" name="myfile" type="file" accept="image/*;capture=camera">
<input id="seisoon" name="seisoon" type="text" />
<input type="submit" id="upload-image" name="upload-image" value="Upload" />
</form>
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">home</a></li>
<li><a href="#upload" data-icon="grid">Browse</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
Ik heb de action ook al ingevuld met $_SERVER['PHP_SELF'] maar ook dat werkt niet. Ik begin hoe langer hoe meer te denken dat mijn code gewoon in conflict is met jquer mobile, iemand dat ziet wat ik fout doe (geen idee wat aangezien het apart wel werkt) of bekend is met dit probleem binnen jquery mobile?
Ik krijg geen php-errors, ik krijg gewoon de melding dat er geen foto geselecteerd is als ik verzend. Na wat testen blijkt mijn $_FILES variabele dus leeg te blijven
Al vast bedankt,
Mvg,
Joren
ps. controle of het wel een afbeelding is en de invoer van het seizoen etc moet ik allemaal nog schrijven dus dat het nog niet veilig is ben ik mij van bewust. Het user systeem moet ik er ook nog rond schrijven.
Er zijn nog geen reacties op dit bericht.