Hey allen, voor school heb ik een projectje, en een subdeel daarvan is om een imagefile up te loaden naar een lokale server.
Ik wil nadat er geklikt wordt op "Upload mijn image" een message zien verschijnen of de image succesvol upgeload is of niet, zonder dat de page moet refreshen. Daarvoor wil ik dus AJAX gaan gebruiken.
Helaas loopt er een heleboel mis, gaande van een "fakepath" tot "undefined indexen".
Mijn structuur bestaat uit 3 onderdelen:
De html pagina waarin je de foto laadt en dan op uploaden klikt: uploadform.html.
Hierin
Dan heb ik mijn controller (deze is nodig voor het volledige project, en de bedoeling is dat deze alle info van de front-end binnenkrijgt en dan naar de juiste php-files doorstuurt): controller.php:
En dan heb ik nog mijn filemanager.php file die voor het effectieve uploaden van de image naar mijn lokale server zorgt:
Nu wat is mijn probleem: ik merkte reeds op dat door via AJAX te gaan werken, mijn path van de file veranderen naar C:\fakepath\imagename.png, maar dat wou ik dus niet. Ik heb dit opgevangen in mijn functie "uploadImage" in "filemanager.php".
Ik krijg volgende error: Notice: Undefined index: C:\fakepath\apple.png in C:\xampp\htdocs\Ugesco\Controller\controller.php on line 87 als ik gebruik maak van de $FILES[]-methode. Met andere woorden, ik denk dat mijn AJAX-script en functie "ajax_post()" in "uploadform.html" mijn file (de image) niet correct doorgeeft naar de php-files.
Voor ik AJAX gebruikte, werkte ik gewoon met een form, en deze POST dit door naar de php's. Wel moest de pagina telkens gerefreshed worden maar het werkte wel om die $FILES[]-methodes te gebruiken. Sinds ik die AJAX gebruik, werkt dit niet meer.
Ik heb reeds getest met gewone info, zoals een textvak met normale text in. Dan wordt alles mooi doorgegeven.
Ik blijf hier maar op zoeken maar vind geen oplossing, heeft iemand raad?
Ik wil nadat er geklikt wordt op "Upload mijn image" een message zien verschijnen of de image succesvol upgeload is of niet, zonder dat de page moet refreshen. Daarvoor wil ik dus AJAX gaan gebruiken.
Helaas loopt er een heleboel mis, gaande van een "fakepath" tot "undefined indexen".
Mijn structuur bestaat uit 3 onderdelen:
De html pagina waarin je de foto laadt en dan op uploaden klikt: uploadform.html.
Hierin
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
42
43
44
45
46
47
48
49
50
51
52
| <html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Upload a picture</title>
<script>
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "../Controller/controller.php";
var f = document.getElementById("fileToUpload").value;
var vars = "f="+f;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<!-- maximum upload size is 5Mb -->
<input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
<p>
Select a picture to upload:
<input id="fileToUpload" type="file" name="fileToUpload" >
</p>
<p>
<input type="submit" value="Upload my image!" name="uploadImagetest" onclick="javascript:ajax_post();">
<br/>
</p>
<p id="status"></p>
</body>
</html> |
Dan heb ik mijn controller (deze is nodig voor het volledige project, en de bedoeling is dat deze alle info van de front-end binnenkrijgt en dan naar de juiste php-files doorstuurt): controller.php:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <?php
include("../Filemanager/filemanager.php");
//If the "uploadImage" button is pressed, all the data gets sent here and the right functions are called to upload the picture in local webserver(image)
//make sure all info is given
if( ($_POST["f"] != null) ){
$path = uploadImage($_POST["f"]);
//Hier staan dan nog functies uit andere php die een upload naar een mySQL-database doen.
echo "File uploaded correctly";
} else{
echo "Please make sure all the info is given.";
} |
En dan heb ik nog mijn filemanager.php file die voor het effectieve uploaden van de image naar mijn lokale server zorgt:
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
| <?php
$folder = "../uploads/";
function uploadImage($picture){
global $folder;
$picture = str_replace( "C:\\fakepath\\", '', $picture); //AJAX-request makes a fakepath but we don't want that
$upload_image = $folder . basename($_FILES[$picture]["name"]);
//whitespace removal form the filename
$upload_image = preg_replace('/\s+/', '', $upload_image);
//filetype opvragen
$imageFileType = strtolower(pathinfo($upload_image,PATHINFO_EXTENSION));
//De toegelaten extensies in een array
$extensions_arr = array("jpg","jpeg","png","gif");
//check if uploaded file is an image of the correct form
if (in_array($imageFileType, $extensions_arr) ){
if (move_uploaded_file($_FILES[$picture]["tmp_name"], $upload_image)) {
echo "The file ". basename( $_FILES[$picture]["name"]). " has been uploaded.";
return $upload_image;
} else {
//incorrect process of uploading gives error
echo "Sorry, there was an error uploading your file.";
}
} else {
//incorrect format gives exception
echo "The selected file is not of the right extension. We only accept jpg, jpeg, png or gif files.";
}
return null;
}
?> |
Nu wat is mijn probleem: ik merkte reeds op dat door via AJAX te gaan werken, mijn path van de file veranderen naar C:\fakepath\imagename.png, maar dat wou ik dus niet. Ik heb dit opgevangen in mijn functie "uploadImage" in "filemanager.php".
Ik krijg volgende error: Notice: Undefined index: C:\fakepath\apple.png in C:\xampp\htdocs\Ugesco\Controller\controller.php on line 87 als ik gebruik maak van de $FILES[]-methode. Met andere woorden, ik denk dat mijn AJAX-script en functie "ajax_post()" in "uploadform.html" mijn file (de image) niet correct doorgeeft naar de php-files.
Voor ik AJAX gebruikte, werkte ik gewoon met een form, en deze POST dit door naar de php's. Wel moest de pagina telkens gerefreshed worden maar het werkte wel om die $FILES[]-methodes te gebruiken. Sinds ik die AJAX gebruik, werkt dit niet meer.
Ik heb reeds getest met gewone info, zoals een textvak met normale text in. Dan wordt alles mooi doorgegeven.
Ik blijf hier maar op zoeken maar vind geen oplossing, heeft iemand raad?
[ Voor 28% gewijzigd door BramCoding op 10-05-2018 22:10 ]
/u/57387/claimedavatar-70.png?f=community){kind=avatar}
/u/107051/jeroenmadtrix60.png?f=community)
/u/9258/killbill.png?f=community)
. Nu ja, ik zoek hard verder want mijn project is verre van al af en ik wil dit niet graag in herexamen nemen.
