beanymanuk Posted August 12, 2014 Share Posted 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 tohttp://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 fileI'm not certain on the CORS issueHere'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 More sharing options...
CroNiX Posted August 13, 2014 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/290422-ajax-upload-image-via-php-script/#findComment-1487696 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.