{"id":850,"date":"2020-07-11T14:40:38","date_gmt":"2020-07-11T09:10:38","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=850"},"modified":"2020-07-11T14:40:38","modified_gmt":"2020-07-11T09:10:38","slug":"upload-image-by-ajax-using-jquery-formdata-without-submit-form","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/upload-image-by-ajax-using-jquery-formdata-without-submit-form\/","title":{"rendered":"Upload Image By Ajax Using jQuery FormData Without Submit Form"},"content":{"rendered":"<h2>Image Upload By JQuery Ajax and PHP<\/h2>\n<p>File uploading by jQuery Ajax,\u00a0 PHP, and\u00a0 HTML it&#8217;s a common feature for the dynamic application but sometimes when form submitted page got refresh after clicked submitted button. But if don&#8217;t need to refresh the page use jQuery and Ajax for sending form-data to PHP File.\u00a0 In this blog, I show the simplest way to upload a single image or file using form data and by using JQuery Ajax and PHP.<\/p>\n<h3>HTML Code &#8211; Input Field for File Upload<\/h3>\n<p>Input type file and Button for click button to call function<\/p>\n<pre> &lt;div class=\"uploadQrImage\"&gt;\r\n&lt;input type=\"file\" name=\"imageUploadQr\" id=\"imageUploadQr\" \/&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"buttonUpload\"&gt;\r\n&lt;input type=\"button\" onclick=\"generateImageQr();\" value=\"Generate QR Code\" \/&gt;\r\n&lt;\/div&gt;<\/pre>\n<h3>jQuery Ajax Code &#8211; Using Form Data<\/h3>\n<p>FormData object is used to submit form and file by JQuery Ajax. Basically, formData sent contact form data to the server script which is written in PHP file. Ajax processes the form data and upload the files.<\/p>\n<p>Below code ajax() function used for sending the file upload request by formData.<\/p>\n<pre> \r\nfunction generateImageQr(){\r\n    var imageId = jQuery('#imageUploadQr').prop('files')[0];\r\n    var formData = new FormData(); \r\n    formData.append('file',imageId);\r\n    console.log(formData);\r\n    $.ajax({\r\n        url : 'sumbitQr.php',\r\n        type : 'POST',\r\n        data : formData,\r\n        cache : false,\r\n        contentType : false, \r\n        processData : false, \r\n        success : function(data){\r\n            console.log(data);\r\n        }\r\n    });   \r\n}<\/pre>\n<h3>PHP Code &#8211; Move Upload file to the folder<\/h3>\n<p>Create PHP Code for move uploaded file by input type file jQuery to upload folder.<\/p>\n<pre>&lt;?php \r\nif(isset($_FILES['file'])){\r\n    echo 'Get Uploaded File';   \r\n    if(0 &lt; $_FILES['file']['error']){\r\n        echo $_FILES['file']['error'].'&lt;br&gt;'; \r\n    }else{\r\n        move_uploaded_file($_FILES['file']['tmp_name'], 'upload\/'.$_FILES['file']['name']); \r\n    }\r\n}   \r\n?&gt;<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Image Upload By JQuery Ajax and PHP File uploading by jQuery Ajax,\u00a0 PHP, and\u00a0 HTML it&#8217;s a common feature for the dynamic application but sometimes when form submitted page got [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":855,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[30,28],"tags":[],"class_list":["post-850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery-code"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Upload Image By Ajax Using jQuery FormData Without Submit Form - MyFreeOnlineTools<\/title>\n<meta name=\"description\" content=\"Upload Image By Ajax Using jQuery FormData Without Submit Form\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload Image By Ajax Using jQuery FormData Without Submit Form - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"Upload Image By Ajax Using jQuery FormData Without Submit Form\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-11T09:10:38+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"225\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/upload-image-by-ajax-using-jquery-formdata-without-submit-form\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Upload Image By Ajax Using jQuery FormData Without Submit Form\",\"datePublished\":\"2020-07-11T09:10:38+00:00\",\"dateModified\":\"2020-07-11T09:10:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/upload-image-by-ajax-using-jquery-formdata-without-submit-form\/\"},\"wordCount\":191,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg\",\"articleSection\":[\"AJAX\",\"jQuery Code\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/myfreeonlinetools.com\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/upload-image-by-ajax-using-jquery-formdata-without-submit-form\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/\",\"name\":\"Upload Image By Ajax Using jQuery FormData Without Submit Form - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg\",\"datePublished\":\"2020-07-11T09:10:38+00:00\",\"dateModified\":\"2020-07-11T09:10:38+00:00\",\"description\":\"Upload Image By Ajax Using jQuery FormData Without Submit Form\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/#primaryimage\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg\",\"width\":400,\"height\":225,\"caption\":\"Image Upload By JQuery Ajax and PHP\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload Image By Ajax Using jQuery FormData Without Submit Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Upload Image By Ajax Using jQuery FormData Without Submit Form - MyFreeOnlineTools","description":"Upload Image By Ajax Using jQuery FormData Without Submit Form","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:\/\/myfreeonlinetools.com\/","og_locale":"en_US","og_type":"article","og_title":"Upload Image By Ajax Using jQuery FormData Without Submit Form - MyFreeOnlineTools","og_description":"Upload Image By Ajax Using jQuery FormData Without Submit Form","og_url":"https:\/\/myfreeonlinetools.com\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2020-07-11T09:10:38+00:00","og_image":[{"width":400,"height":225,"url":"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg","type":"image\/jpeg"}],"author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/upload-image-by-ajax-using-jquery-formdata-without-submit-form\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Upload Image By Ajax Using jQuery FormData Without Submit Form","datePublished":"2020-07-11T09:10:38+00:00","dateModified":"2020-07-11T09:10:38+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/upload-image-by-ajax-using-jquery-formdata-without-submit-form\/"},"wordCount":191,"commentCount":0,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg","articleSection":["AJAX","jQuery Code"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/myfreeonlinetools.com\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/upload-image-by-ajax-using-jquery-formdata-without-submit-form\/","url":"https:\/\/myfreeonlinetools.com\/","name":"Upload Image By Ajax Using jQuery FormData Without Submit Form - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/#primaryimage"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg","datePublished":"2020-07-11T09:10:38+00:00","dateModified":"2020-07-11T09:10:38+00:00","description":"Upload Image By Ajax Using jQuery FormData Without Submit Form","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/#primaryimage","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/image_upload_by_-Jquery_ajax_and_php.jpg","width":400,"height":225,"caption":"Image Upload By JQuery Ajax and PHP"},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Upload Image By Ajax Using jQuery FormData Without Submit Form"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/850\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media\/855"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}