Member Avatar for emclondon

I'm trying to upload an Image to PHP. The most common method I found out to do this was using FORM/POST; But that doesn't help me for what I am about to do.

What I actually am trying to do is upload an image to PHP, the PHP Script will perform its processing and returns a path to the processed image or the image itself. I need to handle sending and returned data. I have tried going through numerous image upload scripts and tutorials, which are good for nothin; except for telling me how image processing works.

The following is my code for HTML, Can anyone help me to write the image sending and retrieving in jQuery?

<html>
    <head>
        <style type="text/css">
            #buttonsdiv{
                position: relative;
                left: 30%;
                top: 10%;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js />
        <script type="text/javascript">
            $(document).ready({
            });

            function dismissUploader(){
                document.getElementById("file").value = "";
            }
        </script>
    </head>
    <body>
        <form action="upload.php" method="POST" enctype="multipart/form-data" >  
            <label for="file" class="filelabel">Select an Image</label><BR />
            <input type="file" name="image" id="file" class="fileupload" size="30"><BR />
            <div id="buttonsdiv">
            <input type="submit" name="upload" class="upload" id="upload" value="Upload" />
            <input type="button" name="close" class="cancel" value="Cancel" onclick="javascript:dismissUploader();" />
            </div>
        </form>
    </body>
</html>

and for the sake of argument, lets assume that the upload file is something like this

<?php
    if (isset($_POST["upload"]))
    {
        $result= "c:\usr\tmp\123.jpg";
        return $result;
    }else{
        die("error");
    }
?>

What happens now is When the user uploads the file, the file is then posted to a file called "upload.php" which returns the uploaded path of the file.

I wanted to know wether if there is any way to get that path from PHP? or Do I need to use jQuery to POST and recieve the path?

  • 2 Contributors
  • 3 Replies
  • 685 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by pritaeas
Member Avatar for emclondon

Hi!

I forgot to mention, I don't want to use any plugins of any sort!.

I've made some changes to the code above and this is where I am stuck

<html>
    <head>
    <style type="text/css">
        #buttonsdiv{
        position: relative;
        left: 30%;
        top: 10%;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ></script>
    <script type="text/javascript">
        $(document).ready({ 
            $("form").submit(function(form){
                    var result = null;
                    var data = null;
                    data = new FormData(); //create post data
                    data.append('file', document.getElementById("fileupload").value);
                    //make the call
                    jQuery.ajax({
                        url: "./upload.php",
                        type: "POST",
                        data: data,
                        contentType: 'multipart/form-data',
                        processData: false,
                        cache: false,
                        success: function(response){ alert(response); }
                    });
                });
        });

        function dismissUploader(){
            document.getElementById("file").value = "";
        }

        function processUpload(form){
            var result = null;
            var data = null;
            data = new FormData(); //create post data
            data.append('file', document.getElementById("fileupload").value);
            //make the call
            jQuery.ajax({
                url: "./upload.php",
                type: "POST",
                data: data,
                contentType: 'multipart/form-data',
                processData: false,
                cache: false,
                success: function(response){ alert(response); }
            });
        }
    </script>
</head>
<body>
    <form id="form" action="upload.php" method="POST" enctype="multipart/form-data" >  
        <label for="file" class="filelabel">Select an Image</label><BR />
        <input type="file" name="file" id="fileupload" class="fileupload" size="30"><BR />
        <div id="buttonsdiv">
            <input type="button" name="upload" class="uploadbutton" id="uploadbutton" value="Upload" onclick="javascript:processUpload(form);" />
            <input type="button" name="close" class="cancelbutton" id="cancelbutton" value="Cancel" onclick="javascript:dismissUploader();" />
        </div>
    </form>
 </body>
</html>

and my php is really simple

<?php 
    var_dump($_FILES['file']);
?>

This gives me an Undefined index error.

Edited by emclondon
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.