{"id":1645,"date":"2016-06-23T19:52:21","date_gmt":"2016-06-23T19:52:21","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1645"},"modified":"2024-08-13T11:50:48","modified_gmt":"2024-08-13T11:50:48","slug":"preview-image-before-upload-jquery","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/","title":{"rendered":"Preview Image Before Upload using jQuery"},"content":{"rendered":"<p>The preview image feature lets the user view the selected image before upload. With this feature, the image is displayed on the webpage immediately after a file is selected by an input field. <b>Preview image before upload<\/b> is a very useful feature for the file upload functionality. The preview file helps the user to make sure before uploading the file on the server and change the chosen image file if needed. From the user&#8217;s perspective, it is very helpful for uploading a perfect image or file without doing the repetitive upload.<\/p>\n<p>The image preview option can be easily integrated into the file upload functionality using JavaScript and jQuery. Not only the image but also the preview of different file types can be displayed before upload. In this tutorial, we will show you how to display a preview of the image before upload using jQuery.<\/p>\n<p>In the example image preview script, we will implement the <a href=\"https:\/\/www.codexworld.com\/php-file-upload\/\">file upload functionality with PHP<\/a> and <b>image preview before upload using jQuery<\/b>.<\/p>\n<h2>File Upload Form<\/h2>\n<p>Create an HTML form with a file select field and a submit button.<\/p>\n<ul>\n<li>Add <code>enctype=\"multipart\/form-data\"<\/code> attribute in the <span style=\"color: rgb(186, 98, 54);\">&lt;<span style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span> tag to enable file upload.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"post\"<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"upload.php\"<\/span> <span class=\"hljs-attr\">enctype<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"multipart\/form-data\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"uploadForm\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"file\"<\/span> \/&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"submit\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"Upload\"<\/span>\/&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">form<\/span>&gt;<\/span><\/pre>\n<h2>Preview Before Upload using jQuery<\/h2>\n<p><b><u>jQuery Library:<\/u><\/b><br \/>\nThe jQuery is used to add\/remove the preview element to the webpage, so include the jQuery library first.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b><u>Read File Data and Generate Preview using JavaScript:<\/u><\/b><br \/>\nThe <b>filePreview()<\/b> is a custom function that helps to read the raw file data and generate a preview of the file.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The FileReader object allows reading the content of the file using JavaScript.<\/li>\n<li>Once the file content is loaded, the image preview is attached to the HTML element using jQuery.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">filePreview<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">input<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (input.files &amp;&amp; input.files[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>]) {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> reader = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> FileReader();\r\n        reader.onload = <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">e<\/span>) <\/span>{\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#uploadForm + img'<\/span>).remove();\r\n            $(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#uploadForm'<\/span>).after(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;img src=\"'<\/span>+e.target.result+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\" width=\"450\" height=\"300\"\/&gt;'<\/span>);\r\n        };\r\n        reader.readAsDataURL(input.files[<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>]);\r\n    }\r\n}<\/pre>\n<p>If you want to preview different types of files, use <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">embed<\/span>&gt;<\/span> tag instead of <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">img<\/span>&gt;<\/span> tag. Place the following code in the <code>reader.onload()<\/code> event.<\/p>\n<pre style=\"color: rgb(110, 107, 94);\">$(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#uploadForm + embed'<\/span>).remove();\r\n$(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#uploadForm'<\/span>).after(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;embed src=\"'<\/span>+e.target.result+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'\" width=\"450\" height=\"300\"&gt;'<\/span>);<\/pre>\n<p><b><u>Display Preview of Selected Image:<\/u><\/b><br \/>\nOnce a file is selected, the preview is displayed using <code>filePreview()<\/code> function.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The jQuery <code>change()<\/code> method triggers the <code>filePreview()<\/code> function when a file is selected.<\/li>\n<li>The <code>filePreview()<\/code> function generates a preview of the selected file and displays it on the web page.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\">$(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"#file\"<\/span>).change(<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> (<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    filePreview(<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>);\r\n});<\/pre>\n<h2>Upload File to Server using PHP (upload.php)<\/h2>\n<p>After the form submission, the selected file is sent to the server-side script to handle the upload process. You can easily upload files to the server using PHP. Use the following PHP code to upload the file to the server using PHP.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Get the file data using <b>$_FILES in PHP<\/b>.<\/li>\n<li>Use <b>move_uploaded_file()<\/b> function to <b>upload file in PHP<\/b>.<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/>$uploadPath&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'uploads\/'<\/span><span style=\"color: #007700\">; <br \/>if(isset(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'submit'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">move_uploaded_file<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'tmp_name'<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">$uploadPath<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'file'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'File&nbsp;has&nbsp;been&nbsp;uploaded&nbsp;successfully.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;<\/span><span style=\"color: #DD0000\">'File&nbsp;upload&nbsp;failed,&nbsp;please&nbsp;try&nbsp;again.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/ajax-file-upload-using-jquery-php\/\">Ajax File Upload using jQuery and PHP<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The preview image feature lets the user view the selected image before upload. With this feature, the image is displayed on the webpage immediately after a file is selected by an input field. Preview image <\/p>\n","protected":false},"author":1,"featured_media":5711,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[132,56,66,16,14,203,67],"class_list":["post-1645","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-file","tag-file-upload","tag-javascript","tag-jquery","tag-php","tag-preview","tag-upload","cat-6-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Preview Image Before Upload using jQuery - CodexWorld<\/title>\n<meta name=\"description\" content=\"Image preview before upload using jQuery - Example script to preview image before upload using JavaScript and jQuery, and upload file to server using PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Preview Image Before Upload using jQuery - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Image preview before upload using jQuery - Example script to preview image before upload using JavaScript and jQuery, and upload file to server using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-23T19:52:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-13T11:50:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/06\/preview-image-before-upload-using-jquery-javascript-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Preview Image Before Upload using jQuery\",\"datePublished\":\"2016-06-23T19:52:21+00:00\",\"dateModified\":\"2024-08-13T11:50:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/\"},\"wordCount\":430,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/preview-image-before-upload-using-jquery-javascript-codexworld.png\",\"keywords\":[\"File\",\"File Upload\",\"JavaScript\",\"jQuery\",\"PHP\",\"Preview\",\"Upload\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/\",\"name\":\"Preview Image Before Upload using jQuery - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/preview-image-before-upload-using-jquery-javascript-codexworld.png\",\"datePublished\":\"2016-06-23T19:52:21+00:00\",\"dateModified\":\"2024-08-13T11:50:48+00:00\",\"description\":\"Image preview before upload using jQuery - Example script to preview image before upload using JavaScript and jQuery, and upload file to server using PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/preview-image-before-upload-using-jquery-javascript-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/preview-image-before-upload-using-jquery-javascript-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"preview-image-before-upload-using-jquery-javascript-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/preview-image-before-upload-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Preview Image Before Upload using jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Preview Image Before Upload using jQuery - CodexWorld","description":"Image preview before upload using jQuery - Example script to preview image before upload using JavaScript and jQuery, and upload file to server using PHP.","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:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Preview Image Before Upload using jQuery - CodexWorld","og_description":"Image preview before upload using jQuery - Example script to preview image before upload using JavaScript and jQuery, and upload file to server using PHP.","og_url":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-06-23T19:52:21+00:00","article_modified_time":"2024-08-13T11:50:48+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/06\/preview-image-before-upload-using-jquery-javascript-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Preview Image Before Upload using jQuery","datePublished":"2016-06-23T19:52:21+00:00","dateModified":"2024-08-13T11:50:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/"},"wordCount":430,"commentCount":5,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/06\/preview-image-before-upload-using-jquery-javascript-codexworld.png","keywords":["File","File Upload","JavaScript","jQuery","PHP","Preview","Upload"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/","url":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/","name":"Preview Image Before Upload using jQuery - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/06\/preview-image-before-upload-using-jquery-javascript-codexworld.png","datePublished":"2016-06-23T19:52:21+00:00","dateModified":"2024-08-13T11:50:48+00:00","description":"Image preview before upload using jQuery - Example script to preview image before upload using JavaScript and jQuery, and upload file to server using PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/06\/preview-image-before-upload-using-jquery-javascript-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/06\/preview-image-before-upload-using-jquery-javascript-codexworld.png","width":1920,"height":1080,"caption":"preview-image-before-upload-using-jquery-javascript-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/preview-image-before-upload-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Preview Image Before Upload using jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/06\/preview-image-before-upload-using-jquery-javascript-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-qx","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1645"}],"version-history":[{"count":7,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1645\/revisions"}],"predecessor-version":[{"id":5710,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1645\/revisions\/5710"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5711"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}