{"id":1513,"date":"2019-04-17T12:15:54","date_gmt":"2019-04-17T06:45:54","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1513"},"modified":"2019-04-17T12:15:54","modified_gmt":"2019-04-17T06:45:54","slug":"upload-display-image-javascript-php","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/upload-display-image-javascript-php\/","title":{"rendered":"Upload and Display Image using JavaScript and PHP"},"content":{"rendered":"<p>In this blog, I\u2019ll show how to upload and display an image with both JavaScript and PHP. Please follow these steps.<\/p>\n<h4><span style=\"color: #808080; border-bottom: 2px solid;\">Step 1<\/span><\/h4>\n<p>First make a folder named, \u201c<em>upload-image<\/em>\u201d. Under <em>\u201cupload-image\u201d<\/em>, create another folder for the image, named <em>\u201cimage\u201d\u00a0<\/em>where my image will show after upload.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_1514\" aria-describedby=\"caption-attachment-1514\" style=\"width: 299px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"wp-image-1514\" src=\"http:\/\/blog.openwebsolutions.in\/wp-content\/uploads\/2019\/04\/floder.png\" alt=\"folder-structure\" width=\"299\" height=\"82\" \/><figcaption id=\"caption-attachment-1514\" class=\"wp-caption-text\"><em><strong><span style=\"text-align: center;\">Folder Structure<\/span><\/strong><\/em><\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h4><span style=\"color: #808080; border-bottom: 2px solid;\">Step 2<\/span><\/h4>\n<p>1. Create a file named, <em>\u201cindex.php\u201d<\/em> and save under <em>\u201cupload-image\u201d<\/em>.<br \/>\n2. Before &lt;body&gt; tag, type this script:<\/p>\n<pre><span style=\"color: #1b75bc;\">&lt;script&gt;<\/span>\r\nfunction uploadpic(pic){\r\ndocument.getElementById(\"image\").setAttribute('src',pic);\r\n}\r\n<span style=\"color: #1b75bc;\">&lt;\/script&gt;<\/span><\/pre>\n<p>&nbsp;<\/p>\n<p>3. Next, under &lt;body&gt; tag, write down the following code:<\/p>\n<pre>&lt;form id=\"form\" method=\"post\" action=\"upload.php\" enctype=\"multipart\/form-data\" target=\"iframe\"&gt;\r\n&lt;input type=\"file\" id=\"file\" name=\"file\"&gt;&lt;br&gt;&lt;br&gt;\r\n&lt;input type=\"submit\" id=\"submit\" name=\"submit\" value=\"Submit\"&gt;&lt;br&gt;\r\n&lt;\/form&gt;\r\n&lt;p id=\"message\"&gt;Message will show here&lt;\/p&gt;\r\n&lt;img id=\"image\" name=\"image\" style=\"min-height:120;min-width:200;max-height:120px;\u201d&gt;\r\n&lt;iframe id=\"iframe\" style=\"display:none;\" name=\"iframe\"&gt;&lt;\/iframe&gt;\r\n\r\n<\/pre>\n<h4><span style=\"color: #808080; border-bottom: 2px solid;\">Step 3<\/span><\/h4>\n<p>1. Now, create a new file named, <em>\u201cupload.php\u201d<\/em> and save under <em>\u201cupload-image\u201d<\/em>.<br \/>\n2. Here, write down the following script:<\/p>\n<pre><span style=\"color: #1b75bc;\">&lt;?php<\/span>\r\nif($_FILES['file']['size']&gt;0){\r\nif($_FILES['file']['size']&lt;=183400)\r\n{\r\nif(move_uploaded_file($_FILES['file']['tmp_name'],'img\/'.$_FILES['file']['name']))\r\n{\r\n<span style=\"color: #1b75bc;\">?&gt;<\/span>\r\n<span style=\"color: #1b75bc;\">&lt;script type<\/span>=\"text\/javascript\"&gt;\r\nparent.document.getElementById(\"message\").innerHTML=\"\";\r\nparent.document.getElementById(\"file\").value=\"\";\r\nwindow.parent.uploadpic(\"&lt;?php echo 'img\/'.$_FILES['file']['name'];?&gt;\")\r\n<span style=\"color: #1b75bc;\">&lt;\/script&gt;<\/span>\r\n<span style=\"color: #1b75bc;\">&lt;?php<\/span>\r\n}\r\nelse\r\n{\r\n<span style=\"color: #1b75bc;\">?&gt;<\/span>\r\n<span style=\"color: #1b75bc;\">&lt;script type<\/span>=\"text\/javascript\"&gt;\r\nparent.document.getElementById(\"message\").innerHTML='&lt;font color=\"#dedeff\"&gt;file upload error&lt;\/font&gt;';\r\n<span style=\"color: #1b75bc;\">&lt;\/script&gt;<\/span>\r\n<span style=\"color: #1b75bc;\">&lt;?php<\/span>\r\n}\r\n}\r\nelse\r\n{\r\n<span style=\"color: #1b75bc;\">?&gt;<\/span>\r\n<span style=\"color: #1b75bc;\">&lt;script type<\/span>=\"text\/javascript\"&gt;alert('$file size is too big');\r\nparent.document.getElementById(\"message\").innerHTML='&lt;font color=\"#dedeff\"&gt;file size is too big&lt;\/font&gt;';\r\n<span style=\"color: #1b75bc;\">&lt;\/script&gt;<\/span>\r\n<span style=\"color: #1b75bc;\">&lt;?php<\/span>\r\n}\r\n}\r\n<span style=\"color: #1b75bc;\">?&gt;<\/span><\/pre>\n<p>Now, run the file. Before running the file, make sure the local server is running otherwise, we\u2019ll not able to show the PHP page. After successfully uploading the image, go to <em>\u201cimage\u201d<\/em> folder, here we see the uploaded image.<\/p>\n<p>&nbsp;<\/p>\n<h5><span style=\"color: #808080;\"><em><strong>*** For Linux users,<\/strong><\/em><\/span><\/h5>\n<p>After following all the steps, if the image can\u2019t display in the page, then go to the <em>Terminal<\/em> and take permission for the folder.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, I\u2019ll show how to upload and display an image with both JavaScript and PHP. Please follow these steps. Step 1 First make a folder named, \u201cupload-image\u201d. Under \u201cupload-image\u201d, create another folder for the image, named \u201cimage\u201d\u00a0where my image will show after upload. &nbsp; &nbsp; Step 2 1. Create a file named, \u201cindex.php\u201d [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":1521,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[72,18,5],"tags":[73,35],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v14.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Upload and Display Image using JavaScript and PHP<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/upload-display-image-javascript-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload and Display Image using JavaScript and PHP\" \/>\n<meta property=\"og:description\" content=\"In this blog, I\u2019ll show how to upload and display an image with both JavaScript and PHP. Please follow these steps. Step 1 First make a folder named, \u201cupload-image\u201d. Under \u201cupload-image\u201d, create another folder for the image, named \u201cimage\u201d\u00a0where my image will show after upload. &nbsp; &nbsp; Step 2 1. Create a file named, \u201cindex.php\u201d [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/upload-display-image-javascript-php\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-17T06:45:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/04\/upload-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/upload-display-image-javascript-php\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/04\/upload-2.png\",\"width\":600,\"height\":600},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/upload-display-image-javascript-php\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/upload-display-image-javascript-php\/\",\"name\":\"Upload and Display Image using JavaScript and PHP\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/upload-display-image-javascript-php\/#primaryimage\"},\"datePublished\":\"2019-04-17T06:45:54+00:00\",\"dateModified\":\"2019-04-17T06:45:54+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/upload-display-image-javascript-php\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\",\"name\":\"Munmun Das\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/033db0a0941d27e1e3e3bdc05f2e1189?s=96&r=g\",\"caption\":\"Munmun Das\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1513"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1513"}],"version-history":[{"count":12,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1513\/revisions"}],"predecessor-version":[{"id":1601,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1513\/revisions\/1601"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1521"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}