Ajax upload image via php script

beanymanuk · August 12, 2014

Hi

Ultimate Aim: To upload multiple images using ajax using a PHP script which will be fired once an image is selected and then return the resulting URL for use in rest of my JS

http://peter-gosling.com/testupload/chooseimage.html simple form
posts to
http://peter-gosling.com/testupload/saveimage.php

This PHP script below currently gets the posted image and assigns it a random number file name and echos this

<?php
header("Access-Control-Allow-Origin: *");

$uploaddir = '/home/petergos/public_html/testupload/images/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
$urlpath = "http://www.peter-gosling.co.uk/testupload/images/";

$temp = explode(".",$_FILES["userfile"]["name"]);
$newfilename = rand(1,999999999) . '.' .end($temp);
$newuploadfile = $uploaddir . $newfilename;
echo "<p>";

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $newuploadfile)) {
    $urlfile = $urlpath . $newfilename;
  echo $urlfile;
} else {
   echo "Upload failed";
}
?>

What I want to do is post my image via ajax but return the value back to my js file

I'm not certain on the CORS issue

Here's my first attempt

http://peter-gosling.com/testupload/

HTML

<!DOCTYPE html>
<html>
    <head>

    </head>   
    <body>
<input type="file" accept="image/*;capture=camera" name="taskoutputfile"></input>

         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript">
$("input[name=taskoutputfile]").on("change", function (){
            var fileName = $(this).val();
            console.log(fileName);
            get_image_url(fileName)
});

//UPLOAD IMAGE RETURN URL
    function get_image_url(imageurl) {
        var dataString = "url="+imageurl;
        //datastring = $("input[name=sessiontitle]").val();
        //AJAX code to submit form.
        $.ajax({
        type: "POST",
        url: "http://www.peter-gosling.co.uk/testupload/saveimage2.php",
        data: dataString,
        cache: false,
        success: function(html) {
        alert(html);
        }
        });
    }
    </script>
</body>
</html>

PHP

<?php
header("Access-Control-Allow-Origin: *");

$uploaddir = '/home/petergos/public_html/testupload/images/';
$uploadfile = $uploaddir . basename($_POST['url']);
$urlpath = "http://www.peter-gosling.co.uk/testupload/images/";

$temp = explode(".",$_POST['url']);
$newfilename = rand(1,999999999) . '.' .end($temp);
$newuploadfile = $uploaddir . $newfilename;
echo "<p>";

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $newuploadfile)) {
    $urlfile = $urlpath . $newfilename;
  return $urlfile;
} else {
   echo "Upload failed";
}
/*
echo "</p>";
echo '<pre>';
echo 'Here is some more debugging info:';
print_r($_FILES);
print "</pre>";
*/
?>

Have attached all files

Any help would be really appreciated

Thankyou

CroNiX · August 13, 2014

In your php that is processing the image, you need to ECHO the url back out to the browser, not RETURN it.

You might also want to rename the uploaded file to something random, or at least check to see if a file already exists with the same name as the uploaded file.

Edited August 13, 2014 by CroNiX

Sign In

Ajax upload image via php script

Recommended Posts

beanymanuk

Link to comment

Share on other sites

CroNiX

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information