Image upload via AJAX/html/php PROBLEEM - Softwareontwikkeling

Vraag

donderdag 10 mei 2018 22:00

Acties:

0 Henk 'm!

Topicstarter

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

code:

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

<?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"]);
//
        echo "File uploaded correctly";
    } else{
        echo "Please make sure all the info is given.";
    }

Alle reacties

donderdag 10 mei 2018 22:08

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Eén topic is genoeg.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Dit topic is gesloten.