Posting image from php to javascript

Question

I have tried to convert my php code using php to javascript ajax. Could you please correct me what supposed to gone wrong since my php code is still activate.

html code:

<form method="post" enctype="multipart/form-data" action="testadd.php">
<input type="file" name="image" id="image">
<br/>
<input type="submit" name="submit" value="upload" id="submit">
</form>

php:

    <?php

        if(isset($_POST['submit'])){

           if(getimagesize($_FILES['image']['tmp_name']) == false){
                  echo "Please select an image";
                  echo "<br/>";

           }else{
                $image = addslashes($_FILES['image']['tmp_name']);
                $name = addslashes($_FILES['image']['name']);
                $image = file_get_contents($image);
                $image = base64_encode($image);
                saveImage($name, $image);
           }

        }

        displayImage();

        function saveImage($name, $image){
          $con = new PDO("mysql:host=localhost; dbname=testimages", "root", "");
          $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          $stmt = $con->query("INSERT INTO images(id, name, image) VALUES(38836929, '$name', '$image') ON DUPLICATE KEY UPDATE image='$image', name='$name'");
          $stmt->execute();
        }
        function displayImage(){
            $con = new PDO("mysql:host=localhost; dbname=testimages", "root", "");
            $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $stmt = $con->query("SELECT * FROM images");
            $stmt->execute();
            while($result = $stmt->fetch(PDO::FETCH_OBJ)){
                 echo '<img height="24" width="24" src="data:image;base64,' . $result->image . '">';
                 echo '<br/>';
                 echo $result->name . ' ';
            }
        }

 ?>

javascript:

   $(document).ready(function(){
    $("#submit").click(function(){

        var image = document.getElementById("image").value;

        alert(" " + image);

        if(image == ""){
            alert("please select image");
        }else{
            $.ajax({
                type: "POST",
                url: "testadd.php",
                data: "image=" + image,
                success: function(data){
                    if(data == success){
                        alert("test");
                    }else{
                        alert("fail");
                    }
                }

            });
        }
        return false;
    });
});

Could you please check what supposed to be the problem in order to be fixed.

did you think i did not search google? why would i asked here if i didn't search on google? I just want to maintain the codes i have written, because in google there's a lot of way how to do this. I just want to know what's wrong with the same code written as mine. — Akira Yuki, Nov 22 '16 at 12:21
several people already asked the same question as yours , that is why i told to did google before ask question — Soni Vimalkumar, Nov 22 '16 at 12:45

score 0 · Answer 1 · answered Nov 22 '16 at 10:23

AJAX must have content Type , ProcessData to upload the image files

             $.ajax({
                  url: 'Your url here',
                  data: formData,
                  type: 'POST',
                  // THIS MUST BE DONE FOR FILE UPLOADING
                  contentType: false,
                  processData: false,
                  // ... Other options like success and etc
                  success : function(data){
                      //Do stuff for ahed process....
                  }
                });

Posting image from php to javascript

1 Answers1