{"id":2449,"date":"2017-05-10T18:52:56","date_gmt":"2017-05-10T18:52:56","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2449"},"modified":"2017-05-10T18:52:56","modified_gmt":"2017-05-10T18:52:56","slug":"live-image-upload-jquery-php-mysql","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/","title":{"rendered":"Live Image Upload using jQuery, PHP and MySQL"},"content":{"rendered":"

Live image upload feature makes web application more user-friendly. With live upload, the user can select and upload images without page refresh<\/b>. Also, once the image is uploaded the preview shows the user which helps to update image without navigation to another page. You can implement live image upload feature with jQuery without using Ajax or any plugin.<\/p>\n

The live image upload is very useful in user panel to update profile picture. In this tutorial, we will show the live image upload and user profile picture update functionality. You’ll learn how to upload and update image without page refresh using jQuery, PHP, and MySQL.<\/p>\n

In our example script, we’ll fetch a particular user data from the MySQL database and show the user details on the web page. The user can change the profile picture without page refresh and their profile image will be updated in the database instantly.<\/p>\n

Database Table Creation<\/h2>\n

Here the simple users<\/code> table structure that holds the basic profile information.<\/p>\n

CREATE<\/span> TABLE<\/span> `users<\/span>` (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT NULL<\/span> AUTO_INCREMENT,\r\n `name`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `email`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `picture`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `created`<\/span> datetime NOT NULL<\/span>,\r\n `modified`<\/span> datetime NOT NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE=<\/span>InnoDB DEFAULT CHARSET=<\/span>utf8 COLLATE=<\/span>utf8_unicode_ci;\r\n<\/pre>\n
Database Configuration (dbConfig.php)<\/h2>\n
The dbConfig.php<\/code> file is used to connect to the MySQL database using PHP. You have to specify the database host ($dbHost<\/code>), username($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>).<\/p>\n
<?php
<\/span>\/\/DB details
<\/span>$dbHost <\/span>= <\/span>'localhost'<\/span>;
<\/span>$dbUsername <\/span>= <\/span>'root'<\/span>;
<\/span>$dbPassword <\/span>= <\/span>''<\/span>;
<\/span>$dbName <\/span>= <\/span>'codexworld'<\/span>;

<\/span>\/\/Create connection and select DB
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);

if(<\/span>$db<\/span>-><\/span>connect_error<\/span>){
    die(<\/span>\"Unable to connect database: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}<\/span><\/pre>\n
Live Image Upload (index.php)<\/h2>\n
Initially, the user’s name and the image will be displayed. Once the user moves the cursor over the profile picture, an edit icon will be shown. By the clicking on the edit icon, the user can select an image to update profile picture. The selected image will be uploaded to the server and profile picture name is updated in the database using the upload.php<\/code> file. On completion of image upload, the profile picture will be replaced by the newly uploaded image and it will be shown to the user.<\/p>\n
HTML & PHP Code:<\/b>
\nThe following HTML is used to display user’s name and image with update option.<\/p>\n
<?php
<\/span>\/\/Include database configuration file
<\/span>include_once <\/span>'dbConfig.php'<\/span>;

<\/span>\/\/Get current user ID from session
<\/span>$userId <\/span>= <\/span>$_SESSION<\/span>[<\/span>'user_id'<\/span>];

<\/span>\/\/Get user data from database
<\/span>$result <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM users WHERE id = <\/span>$userId<\/span>\"<\/span>);
<\/span>$row <\/span>= <\/span>$result<\/span>-><\/span>fetch_assoc<\/span>();

<\/span>\/\/User profile picture
<\/span>$userPicture <\/span>= !empty(<\/span>$row<\/span>[<\/span>'picture'<\/span>])?<\/span>$row<\/span>[<\/span>'picture'<\/span>]:<\/span>'no-image.png'<\/span>;
<\/span>$userPictureURL <\/span>= <\/span>'uploads\/images\/'<\/span>.<\/span>$userPicture<\/span>;
<\/span>?><\/span>\r\n<div<\/span> class<\/span>=\"container\"<\/span>>\r\n    <div<\/span> class<\/span>=\"user-box\"<\/span>>\r\n        <div<\/span> class<\/span>=\"img-relative\"<\/span>>\r\n            <!-- Loading image --><\/span>\r\n            <div<\/span> class<\/span>=\"overlay uploadProcess\"<\/span> style<\/span>=\"display: none;\"<\/span>>\r\n                <div<\/span> class<\/span>=\"overlay-content\"<\/span>><img<\/span> src<\/span>=\"images\/loading.gif\"<\/span>\/><\/div<\/span>>\r\n            <\/div<\/span>>\r\n            <!-- Hidden upload form --><\/span>\r\n            <form<\/span> method<\/span>=\"post\"<\/span> action<\/span>=\"upload.php\"<\/span> enctype<\/span>=\"multipart\/form-data\"<\/span> id<\/span>=<\/span>\"picUploadForm\"<\/span> target<\/span>=\"uploadTarget\"<\/span>>\r\n                <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"picture\"<\/span> id<\/span>=<\/span>\"fileInput\"<\/span>  style<\/span>=\"display:none\"<\/span>\/>\r\n            <\/form<\/span>>\r\n            <iframe<\/span> id<\/span>=<\/span>\"uploadTarget\"<\/span> name<\/span>=\"uploadTarget\"<\/span> src<\/span>=\"#\"<\/span> style<\/span>=\"width:0;height:0;border:0px solid #fff;\"<\/span>><\/iframe<\/span>>\r\n            <!-- Image update link --><\/span>\r\n            <a<\/span> class<\/span>=\"editLink\"<\/span> href<\/span>=\"javascript:void(0);\"<\/span>><img<\/span> src<\/span>=\"images\/edit.png\"<\/span>\/><\/a<\/span>>\r\n            <!-- Profile image --><\/span>\r\n            <img<\/span> src<\/span>=\"<?php <\/span>echo <\/span>$userPictureURL<\/span>; <\/span>?><\/span>\"<\/span> id<\/span>=<\/span>\"imagePreview\"<\/span>>\r\n        <\/div<\/span>>\r\n        <div<\/span> class<\/span>=\"name\"<\/span>>\r\n            <h4<\/span>><?php <\/span>echo <\/span>$row<\/span>[<\/span>'name'<\/span>]; <\/span>?><\/span><\/h3<\/span>>\r\n        <\/div<\/span>>\r\n    <\/div<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n
JavaScript Code:<\/b>
\nAt first, include the jQuery library.<\/p>\n
<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\n
The following jQuery handles the image upload and update functionality.<\/p>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\n$<\/span>(document<\/span>).ready(function<\/span> () {\r\n    \/\/If image edit link is clicked<\/span>\r\n    $<\/span>(\".editLink\"<\/span>).on('click'<\/span>, function<\/span>(e){\r\n        e.preventDefault();\r\n        $<\/span>(\"#fileInput:hidden\"<\/span>).trigger('click'<\/span>);\r\n    });\r\n\r\n    \/\/On select file to upload<\/span>\r\n    $<\/span>(\"#fileInput\"<\/span>).on('change'<\/span>, function<\/span>(){\r\n        var<\/span> image =<\/span> $<\/span>('#fileInput'<\/span>).val();\r\n        var<\/span> img_ex =<\/span> \/(\\.<\/span>jpg|\\.<\/span>jpeg|\\.<\/span>png|\\.<\/span>gif)$\/i<\/span>;\r\n        \r\n        \/\/validate file type<\/span>\r\n        if<\/span>(!<\/span>img_ex.exec<\/span>(image)){\r\n            alert<\/span>('Please upload only .jpg\/.jpeg\/.png\/.gif file.'<\/span>);\r\n            $<\/span>('#fileInput'<\/span>).val(''<\/span>);\r\n            return<\/span> false<\/span>;\r\n        }else<\/span>{\r\n            $<\/span>('.uploadProcess'<\/span>).show();\r\n            $<\/span>('#uploadForm'<\/span>).hide();\r\n            $<\/span>( \"#picUploadForm\"<\/span> ).submit<\/span>();\r\n        }\r\n    });\r\n});\r\n\r\n\/\/After completion of image upload process<\/span>\r\nfunction<\/span> completeUpload<\/span>(success, fileName) {\r\n    if<\/span>(success ==<\/span> 1<\/span>){\r\n        $<\/span>('#imagePreview'<\/span>).attr(\"src\"<\/span>, \"\"<\/span>);\r\n        $<\/span>('#imagePreview'<\/span>).attr(\"src\"<\/span>, <\/span>fileName);\r\n        $<\/span>('#fileInput'<\/span>).attr(\"value\"<\/span>, fileName);\r\n        $<\/span>('.uploadProcess'<\/span>).hide();\r\n    }else<\/span>{\r\n        $<\/span>('.uploadProcess'<\/span>).hide();\r\n        alert<\/span>('There was an error during file upload!'<\/span>);\r\n    }\r\n    return<\/span> true<\/span>;\r\n}\r\n<\/script<\/span>>\r\n<\/pre>\n
Upload & Update Image (upload.php)<\/h2>\n
In the upload.php<\/code> file, the image that posted from index.php file is uploaded to the server using PHP. Also, the existing profile picture name will update with the newly uploaded image name in the MySQL database using PHP. On completion of file upload, the completeUpload()<\/code> function is loaded with status.<\/p>\n
<?php
<\/span>if(!empty(<\/span>$_FILES<\/span>[<\/span>'picture'<\/span>][<\/span>'name'<\/span>])){
    <\/span>\/\/Include database configuration file
    <\/span>include_once <\/span>'dbConfig.php'<\/span>;
    
    <\/span>\/\/File uplaod configuration
    <\/span>$result <\/span>= <\/span>0<\/span>;
    <\/span>$uploadDir <\/span>= <\/span>\"uploads\/images\/\"<\/span>;
    <\/span>$fileName <\/span>= <\/span>time<\/span>().<\/span>'_'<\/span>.<\/span>basename<\/span>(<\/span>$_FILES<\/span>[<\/span>'picture'<\/span>][<\/span>'name'<\/span>]);
    <\/span>$targetPath <\/span>= <\/span>$uploadDir<\/span>. <\/span>$fileName<\/span>;
    
    <\/span>\/\/Upload file to server
    <\/span>if(@<\/span>move_uploaded_file<\/span>(<\/span>$_FILES<\/span>[<\/span>'picture'<\/span>][<\/span>'tmp_name'<\/span>], <\/span>$targetPath<\/span>)){
        <\/span>\/\/Get current user ID from session
        <\/span>$userId <\/span>= <\/span>1<\/span>;
        
        <\/span>\/\/Update picture name in the database
        <\/span>$update <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"UPDATE users SET picture = '\"<\/span>.<\/span>$fileName<\/span>.<\/span>\"' WHERE id = <\/span>$userId<\/span>\"<\/span>);
        
        <\/span>\/\/Update status
        <\/span>if(<\/span>$update<\/span>){
            <\/span>$result <\/span>= <\/span>1<\/span>;
        }
    }
    
    <\/span>\/\/Load JavaScript function to show the upload status
    <\/span>echo <\/span>'<script type=\"text\/javascript\">window.top.window.completeUpload(' <\/span>. <\/span>$result <\/span>. <\/span>',\\'' <\/span>. <\/span>$targetPath <\/span>. <\/span>'\\');<\/script>  '<\/span>;
}<\/span><\/pre>\n
style.css<\/h2>\n
The following CSS are used in live image upload to look good.<\/p>\n
.container<\/span>{width<\/span>:<\/span> 100%<\/span><\/span>;}\r\n.user-box<\/span> {\r\n    width<\/span>:<\/span> 200px<\/span><\/span>;\r\n    border-radius<\/span>:<\/span> 0<\/span> 0<\/span> 3px<\/span><\/span> 3px<\/span><\/span>;\r\n    padding<\/span>:<\/span> 10px<\/span><\/span>;\r\n    position<\/span>:<\/span> relative<\/span>;\r\n}\r\n.user-box<\/span> .name<\/span> {\r\n    word-break:<\/span> break-all<\/span>;\r\n    padding<\/span>:<\/span> 10px<\/span><\/span> 10px<\/span><\/span> 10px<\/span><\/span> 10px<\/span><\/span>;\r\n    background<\/span>:<\/span> #EEEEEE<\/span>;\r\n    text-align<\/span>:<\/span> center<\/span>;\r\n    font-size<\/span>:<\/span> 20px<\/span><\/span>;\r\n}\r\n.user-box<\/span> form<\/span>{display<\/span>:<\/span> inline<\/span>;}\r\n.user-box<\/span> .name<\/span> h4<\/span>{margin<\/span>:<\/span> 0<\/span>;}\r\n.user-box<\/span> img<\/span>#imagePreview<\/span>{width<\/span>:<\/span> 100%<\/span><\/span>;}\r\n\r\n.editLink<\/span> {\r\n    position<\/span>:<\/span>absolute<\/span>;\r\n    top<\/span>:<\/span>28px<\/span><\/span>;\r\n    right<\/span>:<\/span>10px<\/span><\/span>;\r\n    opacity<\/span>:<\/span>0<\/span>;\r\n    transition:<\/span> all<\/span> 0.3s<\/span><\/span> ease-in-out 0s<\/span><\/span>;\r\n    -mox-transition:<\/span> all<\/span> 0.3s<\/span><\/span> ease-in-out 0s<\/span><\/span>;\r\n    -webkit-transition:<\/span> all<\/span> 0.3s<\/span><\/span> ease-in-out 0s<\/span><\/span>;\r\n    background<\/span>:<\/span>rgba<\/span>(255,255,255,0.2<\/span>)<\/span>;\r\n}\r\n.img-relative<\/span>:hover<\/span> .editLink<\/span>{opacity<\/span>:<\/span>1<\/span>;}\r\n.overlay<\/span>{\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    top<\/span>:<\/span> 0<\/span>;\r\n    right<\/span>:<\/span> 0<\/span>;\r\n    bottom<\/span>:<\/span> 0<\/span>;\r\n    z-index<\/span>:<\/span> 2<\/span>;\r\n    background<\/span>:<\/span> rgba<\/span>(255,255,255,0.7<\/span>);\r\n}\r\n.overlay-content<\/span> {\r\n    position<\/span>:<\/span> absolute<\/span>;\r\n    transform:<\/span> translateY(-50%<\/span><\/span>);\r\n    -webkit-transform:<\/span> translateY(-50%<\/span><\/span>);\r\n    -ms-transform:<\/span> translateY(-50%<\/span><\/span>);\r\n    top<\/span>:<\/span> 50%<\/span><\/span>;\r\n    left<\/span>:<\/span> 0<\/span>;\r\n    right<\/span>:<\/span> 0<\/span>;\r\n    text-align<\/span>:<\/span> center<\/span>;\r\n    color<\/span>:<\/span> #555<\/span>;\r\n}\r\n.uploadProcess<\/span> img<\/span>{\r\n    max-width<\/span>:<\/span> 207px<\/span><\/span>;\r\n    border<\/span>:<\/span> none<\/span>;\r\n    box-shadow<\/span>:<\/span> none<\/span>;\r\n    -webkit-border-radius<\/span>:<\/span> 0<\/span>;\r\n    display<\/span>:<\/span> inline<\/span>;\r\n}\r\n<\/pre>\n
Conclusion<\/h2>\n
For demonstration purpose, we’ve used live image upload functionality<\/b> for profile picture update. However, you can use this functionality to any kind of image upload or update. In jQuery code, the file type is validated before upload, presently it accepts only .jpg or .jpeg or .png or .gif file type. Add or remove the file extension as per your requirement.<\/p>\n","protected":false},"excerpt":{"rendered":"
Live image upload feature makes web application more user-friendly. With live upload, the user can select and upload images without page refresh. Also, once the image is uploaded the preview shows the user which helps <\/p>\n","protected":false},"author":1,"featured_media":2450,"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":[4],"tags":[132,16,19,14,67],"class_list":["post-2449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-file","tag-jquery","tag-mysql","tag-php","tag-upload","cat-4-id","has_thumb"],"yoast_head":"\nLive Image Upload using jQuery, PHP and MySQL - CodexWorld<\/title>\n<meta name=\"description\" content=\"Upload image without page refresh using jQuery - Learn how to upload image using jQuery and PHP. Live image upload and update profile picture using jQuery, PHP, and MySQL.\" \/>\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\/live-image-upload-jquery-php-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Live Image Upload using jQuery, PHP and MySQL - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Upload image without page refresh using jQuery - Learn how to upload image using jQuery and PHP. Live image upload and update profile picture using jQuery, PHP, and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/\" \/>\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=\"2017-05-10T18:52:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/live-image-upload-jquery-php-mysql-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Live Image Upload using jQuery, PHP and MySQL\",\"datePublished\":\"2017-05-10T18:52:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/\"},\"wordCount\":459,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/live-image-upload-jquery-php-mysql-codexworld.png\",\"keywords\":[\"File\",\"jQuery\",\"MySQL\",\"PHP\",\"Upload\"],\"articleSection\":[\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/\",\"name\":\"Live Image Upload using jQuery, PHP and MySQL - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/live-image-upload-jquery-php-mysql-codexworld.png\",\"datePublished\":\"2017-05-10T18:52:56+00:00\",\"description\":\"Upload image without page refresh using jQuery - Learn how to upload image using jQuery and PHP. Live image upload and update profile picture using jQuery, PHP, and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/live-image-upload-jquery-php-mysql-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/live-image-upload-jquery-php-mysql-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"live-image-upload-jquery-php-mysql-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/live-image-upload-jquery-php-mysql\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Live Image Upload using jQuery, PHP and MySQL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web & 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":"Live Image Upload using jQuery, PHP and MySQL - CodexWorld","description":"Upload image without page refresh using jQuery - Learn how to upload image using jQuery and PHP. Live image upload and update profile picture using jQuery, PHP, and MySQL.","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\/live-image-upload-jquery-php-mysql\/","og_locale":"en_US","og_type":"article","og_title":"Live Image Upload using jQuery, PHP and MySQL - CodexWorld","og_description":"Upload image without page refresh using jQuery - Learn how to upload image using jQuery and PHP. Live image upload and update profile picture using jQuery, PHP, and MySQL.","og_url":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-05-10T18:52:56+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/live-image-upload-jquery-php-mysql-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":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Live Image Upload using jQuery, PHP and MySQL","datePublished":"2017-05-10T18:52:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/"},"wordCount":459,"commentCount":3,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/live-image-upload-jquery-php-mysql-codexworld.png","keywords":["File","jQuery","MySQL","PHP","Upload"],"articleSection":["PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/","url":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/","name":"Live Image Upload using jQuery, PHP and MySQL - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/live-image-upload-jquery-php-mysql-codexworld.png","datePublished":"2017-05-10T18:52:56+00:00","description":"Upload image without page refresh using jQuery - Learn how to upload image using jQuery and PHP. Live image upload and update profile picture using jQuery, PHP, and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/live-image-upload-jquery-php-mysql-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/05\/live-image-upload-jquery-php-mysql-codexworld.png","width":1366,"height":768,"caption":"live-image-upload-jquery-php-mysql-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/live-image-upload-jquery-php-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Live Image Upload using jQuery, PHP and MySQL"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web & 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\/2017\/05\/live-image-upload-jquery-php-mysql-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-Dv","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2449","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=2449"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2449\/revisions"}],"predecessor-version":[{"id":2452,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2449\/revisions\/2452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2450"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}