{"id":16835,"date":"2020-07-29T11:35:21","date_gmt":"2020-07-29T11:35:21","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=16835"},"modified":"2021-10-30T05:50:42","modified_gmt":"2021-10-30T05:50:42","slug":"how-to-upload-and-resize-an-image-using-php","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-upload-and-resize-an-image-using-php\/","title":{"rendered":"How to Upload and Resize an Image using PHP."},"content":{"rendered":"\n<p>In this post, we are going to learn how to upload and resize an image using <strong>PHP<\/strong>. Here we going to use simple PHP code for image upload and resize that image with the help of user-submitted image file data.<\/p>\n\n\n\n<p>When Users upload images to the server then at that time page will not be refresh and after completing image upload it will display an image on the web page without page refresh.<\/p>\n\n\n\n<p>I have made some validation for uploading images. Validation like the image is selected or not, allowed image file formate, size of the image. If this validation passes the image file then after it will upload to the server.<\/p>\n\n\n\n<p><strong>Step 1:<\/strong> Create a new index.php.<\/p>\n\n\n\n<p>Here we need to define form with file input tag and enctype=\u201dmultipart\/form-data\u201d form Enctype method. It will help us to choose and submit the image file to a PHP script.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/2e9f8fdf844e69bf7ddb49f880281124.js\"><\/script>\n\n\n\n<p><strong>Step 2:<\/strong> Resize image PHP code.<\/p>\n\n\n\n<p>Here we are going to define an image upload handling process scripts with thumbnail image creation form an original file.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/7a824e9a50c899ad6980591b2e57d32c.js\"><\/script>\n\n\n\n<p>Here the complete code:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/b69a0a9f7e30e69c049d511b24afd600.js\"><\/script>\n\n\n\n<p>And, also create an <strong>uploads <\/strong>name folder for upload and download the image.<\/p>\n\n\n\n<p>Then, <strong>RUN <\/strong>these index.php file, you can see the view.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/1.png\" alt=\"\" class=\"wp-image-16842\" width=\"626\" height=\"205\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/1.png 784w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/1-300x99.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/1-768x253.png 768w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/figure>\n\n\n\n<p>Then, Select the Width, Height and Choose image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/2.png\" alt=\"\" class=\"wp-image-16843\" width=\"637\" height=\"210\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/2.png 783w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/2-300x99.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/2-768x253.png 768w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/figure>\n\n\n\n<p>See the result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/3.png\" alt=\"\" class=\"wp-image-16845\" width=\"641\" height=\"543\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/3.png 772w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/3-300x255.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/3-768x652.png 768w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/figure>\n\n\n\n<p><strong><a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/github.com\/narayanlog\/resize-image-php\" target=\"_blank\" rel=\"noreferrer noopener\">Download the Source Code:<\/a><\/strong><\/p>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_18242\"><iframe loading=\"lazy\"  id=\"_ytid_94006\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_18242\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>In this post, we are going to learn how to upload and resize an image using PHP. Here we going to use simple PHP code for image upload and resize&#8230; <\/p>\n","protected":false},"author":9,"featured_media":16847,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5150],"tags":[177],"class_list":["post-16835","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-php"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=16835"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16835\/revisions"}],"predecessor-version":[{"id":24639,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16835\/revisions\/24639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/16847"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=16835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=16835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=16835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}