Jump to content

Ajax upload image via php script


beanymanuk

Recommended Posts

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


 

Link to comment
https://forums.phpfreaks.com/topic/290422-ajax-upload-image-via-php-script/
Share on other sites

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.