{"id":590,"date":"2021-05-24T21:08:39","date_gmt":"2021-05-24T20:08:39","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=590"},"modified":"2021-05-24T21:17:47","modified_gmt":"2021-05-24T20:17:47","slug":"image-upload-with-file-preview-using-phps-pdo-and-jquery","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/","title":{"rendered":"Image Upload With Preview Using PHP&#8217;s PDO And jQuery"},"content":{"rendered":"\n<p>With PHP we can upload various files to the server depending on the given requirements and specifications. In this tutorial, we shall look at how to upload image to the server and store the path in our database. <\/p>\n\n\n\n<p>So let&#8217;s begin!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/morty.gif\" alt=\"\" class=\"wp-image-627\"\/><\/figure><\/div>\n\n\n\n<p>First, let us create our database connection:<\/p>\n\n\n\n<pre title=\"database.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\"> &lt;?php\n defined('BASEPATH') OR exit('No direct script access allowed');\n $host = 'localhost';\n $user = 'root';\n $password = '';\n $dbname = 'test';\n $dsn = '';\ntry{\n     $dsn = 'mysql:host='.$host. ';dbname='.$dbname;\n<code><span class=\"has-inline-color has-black-color\">$pdo = new PDO($dsn, $user, $password); $pdo-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);<\/span><\/code> }catch(PDOException $e){\n     echo 'connection failed: '.$e-&gt;getMessage();\n }\n ?&gt;<\/code><\/pre>\n\n\n\n<p>Next, we create our table called <strong><em>images.<\/em><\/strong> Here we&#8217;re adding both the image name and the image file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">CREATE TABLE `images` (\n  `id` int(11) NOT NULL,\n  `image_name` varchar(300) NOT NULL,\n  `image_file` text NOT NULL,\n  `date_time` datetime NOT NULL DEFAULT current_timestamp()\n) ENGINE=MyISAM DEFAULT CHARSET=latin1;<\/code><\/pre>\n\n\n\n<p>Next, we create a form that with which we can upload our file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;form action=\"index.php\" method=\"post\"  enctype=\"multipart\/form-data\"&gt;\n&lt;div&gt;\n&lt;label for=\"title\"&gt;Image title&lt;\/label&gt;\n&lt;input id=\"title\" name=\"image_name\" required=\"required\" type=\"text\" aria-required=\"true\" aria-invalid=\"false\"&gt;\n&lt;\/div&gt;\n&lt;div class=\"form-group\"&gt;\n&lt;div id=\"preview-container-imageThre\"&gt;\n&lt;button required type=\"button\"  id=\"upload-dialog-three\"&gt;Choose Image&lt;\/button&gt;&lt;br \/&gt;&lt;br \/&gt;\n&lt;input require type=\"file\" id=\"file\" name=\"file\" accept=\"image\/jpg,image\/png\" style=\"display:none\" required=\"required\"\/&gt;\n&lt;img id=\"preview-image-three\" style=\"display:none\" \/&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div&gt;\n&lt;button id=\"payment-button\" type=\"submit\" name=\"sub\"&gt;\nAdd\n&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>Next, we will write our Javascript code that will preview our image using jQuery. Don&#8217;t forget to add your <a href=\"https:\/\/code.jquery.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">jQuery cdn <\/a>dependency.<\/p>\n\n\n\n<p><a href=\"https:\/\/codeflarelimited.com\/blog\/create-a-php-login-and-register-form-using-pdo-and-password-encryption-technique\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create Login and registration form using PDO<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-add-upload-preview-using-jquery\">Add Upload Preview Using jQuery<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;script&nbsp;src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;\nlet _PREVIEW_URL;\n\n\/* Show Select File dialog *\/\ndocument.querySelector(\"#upload-dialog-three\").addEventListener('click', function() {\n    document.querySelector(\"#file\").click();\n});\n\n\/* Selected File has changed *\/\ndocument.querySelector(\"#file\").addEventListener('change', function() {\n    \/\/ user selected file\n    var file = this.files[0];\n\n    \/\/ allowed MIME types\n    var mime_types = [ 'image\/jpeg', 'image\/png' ];\n    \n    \/\/ validate MIME\n    if(mime_types.indexOf(file.type) == -1) {\n        alert('Error : Incorrect file type');\n        return;\n    }\n\n    \/\/ validate file size\n    if(file.size &gt; 5*1024*1024) {\n        alert('Error : Exceeded size 2MB');\n        return;\n    }\n\n    \/\/ validation is successful\n\n    \/\/ replace upload dialog button text\n    document.querySelector(\"#upload-dialog-three\").textContent = 'Replace image';\n\n    \/\/ object url\n    _PREVIEW_URL = URL.createObjectURL(file);\n\n    \/\/ set src of image and show\n    document.querySelector(\"#preview-image-three\").setAttribute('src',         _PREVIEW_URL);\n    document.querySelector(\"#preview-image-three\").style.display = 'inline-block';\n    });\n    &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<pre title=\"index.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\"> &lt;?php \ndefine('BASEPATH', true);\nrequire '.\/database.php';\n\n   $exists = \"\";\n\nif(isset($_POST['sub'])){\n     try {\n            $dsn = new PDO(\"mysql:host=$host;dbname=$dbname\", $user, $password);\n            $dsn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);\n            \n            $title = $_POST['image_name'];\n            $target_file = \"\";\n         \n             $target_dir = \".\/images\/\"; \/\/set your folder path\n            $target_file = $target_dir . basename($_FILES[\"file\"][\"name\"]);\n            $uploadOk = 1;\n            $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));\n            move_uploaded_file($_FILES[\"file\"][\"tmp_name\"], $target_file) ;\n            \n             $target_file = 'https:\/\/yourdomain.com\/'.$target_file;\n             \n             $sql = \"SELECT COUNT(image_file) AS num FROM images WHERE image_file = :image_file\"; \/\/check if file exists\n         $stmt = $pdo-&gt;prepare($sql);\n\n         $stmt-&gt;bindValue(':image_file', $target_file);\n         $stmt-&gt;execute();\n         $row = $stmt-&gt;fetch(PDO::FETCH_ASSOC);\n\n         if($row['num'] &gt; 0 ){\n           \/\/Show Bootstrap alert. Optional here\n            $exists = '&lt;div class=\"col-sm-6 alert alert-danger alert-dismissible fade show\" role=\"alert\" style=\"margin: 0 auto\"&gt;\n                     \n                      &lt;p&gt;&lt;span class=\"fa fa-exclamation-triangle\"&gt;&lt;\/span&gt; This image already exists.&lt;\/p&gt;\n                      &lt;span&gt;&lt;span class=\"fa fa-lightbulb-o fa-warning\"&gt;&lt;\/span&gt; Hint: Rename image&lt;\/span&gt;\n                    &lt;\/div&gt;';\n        }else{\n             \n              $stmt = $dsn-&gt;prepare(\"INSERT INTO images (image_name, image_file) \n                VALUES (:image_name, :image_file)\");\n                $stmt-&gt;bindParam(':image_name', $title);\n                $stmt-&gt;bindParam(':image_file', $target_file);\n                \n                 if($stmt-&gt;execute()){\n    echo '&lt;script&gt;alert(\"New image added the Gallery successfully.\")&lt;\/script&gt;';\n     \n   }else{\n       echo '&lt;script&gt;alert(\"An error occurred\")&lt;\/script&gt;';\n   }\n        }\n            \n     }catch(PDOException $e){\n          $error = \"Error: \" . $e-&gt;getMessage();\n    echo '&lt;script type=\"text\/javascript\"&gt;alert(\"'.$error.'\");&lt;\/script&gt;';\n     }\n}\n?&gt;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"574\" src=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-20.33.37.png\" alt=\"\" class=\"wp-image-625\" srcset=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-20.33.37.png 508w, https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-20.33.37-266x300.png 266w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-congratulations\">Congratulations!<\/h2>\n\n\n\n<p>You have successfully uploaded your image to the server.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With PHP we can upload various files to the server depending on the given requirements and specifications. In<\/p>\n","protected":false},"author":1,"featured_media":632,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[87],"tags":[],"class_list":["post-590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Image Upload With Preview Using PHP&#039;s PDO And jQuery<\/title>\n<meta name=\"description\" content=\"With PHP we can upload various files to the server depending on the requirements. In this tutorial, we shall look at how to upload image ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Upload With Preview Using PHP&#039;s PDO And jQuery\" \/>\n<meta property=\"og:description\" content=\"With PHP we can upload various files to the server depending on the requirements. In this tutorial, we shall look at how to upload image ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-24T20:08:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-24T20:17:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-21.18.57.png\" \/>\n\t<meta property=\"og:image:width\" content=\"932\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"Image Upload With Preview Using PHP&#8217;s PDO And jQuery\",\"datePublished\":\"2021-05-24T20:08:39+00:00\",\"dateModified\":\"2021-05-24T20:17:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/\"},\"wordCount\":132,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Screenshot-2021-05-24-at-21.18.57.png\",\"articleSection\":[\"php\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/\",\"name\":\"Image Upload With Preview Using PHP's PDO And jQuery\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Screenshot-2021-05-24-at-21.18.57.png\",\"datePublished\":\"2021-05-24T20:08:39+00:00\",\"dateModified\":\"2021-05-24T20:17:47+00:00\",\"description\":\"With PHP we can upload various files to the server depending on the requirements. In this tutorial, we shall look at how to upload image ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Screenshot-2021-05-24-at-21.18.57.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Screenshot-2021-05-24-at-21.18.57.png\",\"width\":932,\"height\":577,\"caption\":\"php image upload\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/image-upload-with-file-preview-using-phps-pdo-and-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"php\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/php\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Image Upload With Preview Using PHP&#8217;s PDO And jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Upload With Preview Using PHP's PDO And jQuery","description":"With PHP we can upload various files to the server depending on the requirements. In this tutorial, we shall look at how to upload image ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Image Upload With Preview Using PHP's PDO And jQuery","og_description":"With PHP we can upload various files to the server depending on the requirements. In this tutorial, we shall look at how to upload image ...","og_url":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2021-05-24T20:08:39+00:00","article_modified_time":"2021-05-24T20:17:47+00:00","og_image":[{"width":932,"height":577,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-21.18.57.png","type":"image\/png"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"Image Upload With Preview Using PHP&#8217;s PDO And jQuery","datePublished":"2021-05-24T20:08:39+00:00","dateModified":"2021-05-24T20:17:47+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/"},"wordCount":132,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-21.18.57.png","articleSection":["php"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/","url":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/","name":"Image Upload With Preview Using PHP's PDO And jQuery","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-21.18.57.png","datePublished":"2021-05-24T20:08:39+00:00","dateModified":"2021-05-24T20:17:47+00:00","description":"With PHP we can upload various files to the server depending on the requirements. In this tutorial, we shall look at how to upload image ...","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-21.18.57.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-21.18.57.png","width":932,"height":577,"caption":"php image upload"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/image-upload-with-file-preview-using-phps-pdo-and-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"php","item":"https:\/\/codeflarelimited.com\/blog\/php\/"},{"@type":"ListItem","position":3,"name":"Image Upload With Preview Using PHP&#8217;s PDO And jQuery"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2021\/05\/Screenshot-2021-05-24-at-21.18.57.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=590"}],"version-history":[{"count":4,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/590\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/590\/revisions\/631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/632"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}