Image Read, upload with JS as Blob in Database and show on page

<?php

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

if(isset($_POST['image']) && $_POST['image']=='upload')
{
    $image = $_POST['string'] ;
    $sql = "INSERT INTO  image (name, image)
    VALUES ('image_name','".$image."')";

    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

}

?>

<HTML>
<HEAD>
<TITLE>Read image in JS</TITLE>
<style>
   #inputTextToSave {
        width:512px; 
        height:256px;
      }

      #holder { 
        border: 10px dashed #ccc; 
        width: 300px; 
        height: 300px; 
      }

      #holder.hover { 
        border: 10px dashed #333; 
      }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</HEAD>
<BODY>
<table>

      <tr>
        <td colspan="3">Binary data:</td>
      </tr>

      <tr>
        <td colspan="3">
          <textarea id="inputTextToSave"></textarea>
        </td>
      </tr>

      <tr>
        <td>Filename to Save As:</td>
        <td><input id="inputFileNameToSaveAs" /></td>
        <td><button onclick="saveImage()">Save file</button></td>
      </tr>

      <tr>
        <td>Select a File to Load:</td>
        <td><input type="file" id="fileToLoad" /></td>
          <td><button onclick="loadImage()">Load file</button></td>
      </tr>

      <tr>
        <td colspan="3" id="imagePreview">
        </td>
      </tr>

    </table>

<script>
var contentType = '';

      function destroyClickedElement(event) {
        document.body.removeChild(event.target);
      }

      window.loadImage = function() {
        var file = document.getElementById("fileToLoad").files[0];

        var reader = new FileReader();
        reader.onload = function(event) {
          var data = event.target.result;
          document.getElementById("inputTextToSave").value = data;

          var imagePreview = document.getElementById("imagePreview");
          imagePreview.innerHTML = '';

          var dataURLReader = new FileReader();
          dataURLReader.onload = function(event) {
            // Parse image properties
            var dataURL = event.target.result;
            $.post( "image_read_in_js.php", 
                { 
                    "image": "upload",
                    "string":dataURL 
                 },
                function( data ) {
              console.log( data);
            }, "json");
            contentType = dataURL.split(",")[0].split(":")[1].split(";")[0];

            var image = new Image();
            image.src = dataURL;
            image.onload = function() {
              console.log("Image type: " + contentType);
              console.log("Image width: " + this.width);
              console.log("Image height: " + this.height);
              imagePreview.appendChild(this);
            };
          };
          dataURLReader.readAsDataURL(file);


        };
        reader.readAsBinaryString(file);
      }
  
</script>

<div style="border: solid 1px;">
<?php
$sql = "SELECT * FROM image";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo '<img src="' .$row['image'] . '" />';
    }
} else {
    echo "0 results";
}

?>
</div>
</BODY>
</HTML>

Cross domain ajax request to a json file using JSONP

jQuery.ajax({
dataType: "jsonp",
url: https://digimantralabs.com/cishopify/shop/getdata?callback=somefunction,
data: {pid: productID},
success: function(data) { console.log(data);
jQuery('#product_review').html(data);
},
onComplete: function(htmldata){
alert();
}
});

 

$callback =  $this->input->get('callback');
$object=array('postalcodes'
=>array(
array(
"adminName2" => "Westchester",
"adminCode2" => "119",
"postalcode" => "10504",
"adminCode1" => "NY",
"countryCode" => "US",
"lng" => -73.700942,
"placeName" => "Armonk",
"lat" => 41.136002,
"adminName1" => "New York"
)));
echo $callback.'('.json_encode($object).')';