Return PHP data with AJAX

Question

I am slowly learning how to build a fully custom CMS system, and currently building a Image Uploader. Ive got my PHP form to work but what i want is to send and return data to the upload.php file using AJAX. So far i have managed to successfully send the form data to PHP and the image is uploaded into the my uploads folder. The trouble I am having is that nothing is returned to me to tell me if it was successful or not. I would like the image to display if its successful and and error message if its not. I am not that experienced with using Javascript or AJAX so could someone please look at my code and tell me where i am going wrong?

HTML UPLOAD FORM

<div class="container-main">
  <form action="" method="post" id="myForm" enctype="multipart/form-data">
    <input type="file" name="file" id="file"><br>
    <input type="submit" id="upload-img" name="submit" class="btn btn-success" value="Upload Image">
  </form>

  <div class="progress progress-striped active">
    <div class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
      <span class="sr-only">0% Complete</span> 
    </div>
  </div>
  <div class="image">
  <!-- uploaded image goes here -->   
  </div>
</div>

<script type="text/javascript" src="js/custom.js"></script>

JS

$('#upload-img').on('click', function() {
    var file_data = $('#file').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
                url: 'upload.php', // point to server-side PHP script 
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         
                type: 'post',
                success: function(){
                    $(".image").html("<img src='"+response.responseText+"' width='100%'/>");

                }
     });
});

upload.php

$allowedExts = array("gif", "jpeg", "jpg", "png","GIF","JPEG","JPG","PNG");

$temp = explode(".", $_FILES["file"]["name"]);

$extension = end($temp);

if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& in_array($extension, $allowedExts)) {

  if ($_FILES["file"]["error"] > 0) {
    echo "Invalid File Type";
  } else {
    $target = "../upload/";
    move_uploaded_file($_FILES["file"]["tmp_name"], $target. $_FILES["file"]["name"]);
    echo  "../upload/" . $_FILES["file"]["name"];

  }
} else {
  echo "Error uploading image";
  die();
}

Many Thanks!

change success: function(){ to success: function(response){ and just use response as a string variable — SierraOscar
– SierraOscar, Commented Sep 8, 2016 at 11:41
Press F12, go to your NETWORK tab and check this request's response. — Phiter
– Phiter, Commented Sep 8, 2016 at 11:56

SierraOscar · Accepted Answer · 2016-09-08 11:46:13Z

2

You don't need to use the .responseText property (it doesn't exist anyway)

and your function should be like so:

success: function(response){
                    $(".image").html('<img src="'+response+'" width="100%"/>');

                }

Note I changed your single/double quotes around.

edited Sep 8, 2016 at 11:46

answered Sep 8, 2016 at 11:44

SierraOscar

17.7k6 gold badges44 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

SierraOscar Over a year ago

@AkshayKhetrapal which was stupid of me, considering I posted that as a comment first! Changed now - thanks for spotting it

SanketR Over a year ago

There's someone who's simply downvoting the answers and not contributing to any help. I deleted my answer.

SierraOscar Over a year ago

@SanketR your code was indeed correct for PHP, but the problem isn't the PHP - it's that jQuery isn't returning a value in the ajax response.

SanketR Over a year ago

Yes. I said I misunderstood it.

SierraOscar Over a year ago

@LouisShiggyLombardi is your document being refreshed at some point?

|

Collectives™ on Stack Overflow

Return PHP data with AJAX

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related