{"id":6911,"date":"2015-09-09T12:15:48","date_gmt":"2015-09-09T09:15:48","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6911"},"modified":"2017-12-21T16:39:06","modified_gmt":"2017-12-21T14:39:06","slug":"jquery-file-upload-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/","title":{"rendered":"jQuery File Upload Example"},"content":{"rendered":"<p>The aim of this example is to give you the right knowledge about how you can achieve file upload with jQuery. Notice that this is not an easy task, and plugins are recommended to have non-surprising results.<\/p>\n<p>In particular, there is one famous and very used jQuery Plugin for file upload made public to GitHub by <strong>blueimp<\/strong>. They created a file upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery.<\/p>\n<p>It supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;qGGDqWnle19VavkM&#8217;]<\/p>\n<h2>1. Plugin Demo and Features<\/h2>\n<h3>1.1 Video Demo #1 &#8211; Single &amp; Multiple Files Upload<\/h3>\n<div style=\"width: 1280px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6911-1\" width=\"1280\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jquery-fileupload-1.mp4?_=1\" \/><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jquery-fileupload-1.mp4\">http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jquery-fileupload-1.mp4<\/a><\/video><\/div>\n<p><\/p>\n<h3>1.2 Video Demo #2 &#8211; Drag &amp; Drop File Upload<\/h3>\n<div style=\"width: 1280px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6911-2\" width=\"1280\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jquery-fileupload-2.mp4?_=2\" \/><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jquery-fileupload-2.mp4\">http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jquery-fileupload-2.mp4<\/a><\/video><\/div>\n<p><\/p>\n<h3>1.3 Features<\/h3>\n<p>\u2022&nbsp;<strong>Multiple file upload:<\/strong><br \/>\nAllows to select multiple files at once and upload them simultaneously.<br \/>\n\u2022&nbsp;<strong>Drag &amp; Drop support:<\/strong><br \/>\nAllows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.<br \/>\n\u2022&nbsp;<strong>Upload progress bar:<\/strong><br \/>\nShows a progress bar indicating the upload progress for individual files and for all uploads combined.<br \/>\n\u2022&nbsp;<strong>Cancelable uploads:<\/strong><br \/>\nIndividual file uploads can be canceled to stop the upload progress.<br \/>\n\u2022&nbsp;<strong>Resumable uploads:<\/strong><br \/>\nAborted uploads can be resumed with browsers supporting the Blob API.<br \/>\n\u2022&nbsp;<strong>Chunked uploads:<\/strong><br \/>\nLarge files can be uploaded in smaller chunks with browsers supporting the Blob API.<br \/>\n\u2022&nbsp;<strong>Client-side image resizing:<\/strong><br \/>\nImages can be automatically resized on client-side with browsers supporting the required JS APIs.<br \/>\n\u2022&nbsp;<strong>Preview images, audio and video:<\/strong><br \/>\nA preview of image, audio and video files can be displayed before uploading with browsers supporting the required APIs.<br \/>\n\u2022&nbsp;<strong>No browser plugins (e.g. Adobe Flash) required:<\/strong><br \/>\nThe implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.<br \/>\n\u2022&nbsp;<strong>Graceful fallback for legacy browsers:<\/strong><br \/>\nUploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.<br \/>\n\u2022&nbsp;<strong>HTML file upload form fallback:<\/strong><br \/>\nAllows progressive enhancement by using a standard HTML file upload form as widget element.<br \/>\n\u2022&nbsp;<strong>Cross-site file uploads:<\/strong><br \/>\nSupports uploading files to a different domain with cross-site XMLHttpRequests or iframe redirects.<br \/>\n\u2022&nbsp;<strong>Multiple plugin instances:<\/strong><br \/>\nAllows to use multiple plugin instances on the same webpage.<br \/>\n\u2022&nbsp;<strong>Customizable and extensible:<\/strong><br \/>\nProvides an API to set individual options and define callBack methods for various upload events.<br \/>\n\u2022&nbsp;<strong>Multipart and file contents stream uploads:<\/strong><br \/>\nFiles can be uploaded as standard &#8220;multipart\/form-data&#8221; or file contents stream (HTTP PUT file upload).<br \/>\n\u2022&nbsp;<strong>Compatible with any server-side application platform:<\/strong><br \/>\nWorks with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.<\/p>\n<h2>2. Basic Plugin Setup<\/h2>\n<h3>2.1 HTML Setup<\/h3>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE HTML&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"utf-8\"&gt;\r\n&lt;title&gt;jQuery File Upload Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;input id=\"fileupload\" type=\"file\" name=\"files[]\" data-url=\"server\/php\/\" multiple&gt;\r\n&lt;script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/vendor\/jquery.ui.widget.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/jquery.iframe-transport.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"js\/jquery.fileupload.js\"&gt;&lt;\/script&gt;\r\n&lt;script&gt;\r\n$(function () {\r\n    $('#fileupload').fileupload({\r\n        dataType: 'json',\r\n        done: function (e, data) {\r\n            $.each(data.result.files, function (index, file) {\r\n                $('&lt;p\/&gt;').text(file.name).appendTo(document.body);\r\n            });\r\n        }\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>Response and data type<\/strong><\/p>\n<p>The example above sets the dataType option to json, expecting the server to return a JSON response for each uploaded file. However it&#8217;s also possible to handle HTML content types as response or any other dataType that you can handle in your done handler.<\/p>\n<h3>2.2 Display Upload Progress<\/h3>\n<p>The fileupload plugin triggers progress events for both individual uploads (progress) and all running uploads combined (progressall). Event handlers can be set via the event binding mechanism or as widget options.<\/p>\n<pre class=\"brush:java\">\r\n$('#fileupload').fileupload({\r\n    \/* ... *\/\r\n    progressall: function (e, data) {\r\n        var progress = parseInt(data.loaded \/ data.total * 100, 10);\r\n        $('#progress .bar').css(\r\n            'width',\r\n            progress + '%'\r\n        );\r\n    }\r\n});\r\n<\/pre>\n<p>The previous code assumes a progress node with an inner element that displays the progress status via its width percentage:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;div id=\"progress\"&gt;\r\n    &lt;div class=\"bar\" style=\"width: 0%;\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>The inner element should have a different background color than the container node, set via CSS and needs a height applied:<\/p>\n<pre class=\"brush:css\">\r\n.bar {\r\n    height: 18px;\r\n    background: green;\r\n}\r\n<\/pre>\n<h3>2.3 Tie a file to an element node during the life cycle of an upload<\/h3>\n<p>Often, you will display a file to upload in an element node. This can be done in the <strong>add<\/strong> callback.<\/p>\n<p>To be able to refer to the same element node in other callbacks related to the upload, you can make use of the <strong>context<\/strong> option (which is actually an option of jquery.ajax):<\/p>\n<pre class=\"brush:java\">\r\n$(function () {\r\n    $('#fileupload').fileupload({\r\n        dataType: 'json',\r\n        add: function (e, data) {\r\n            data.context = $('<p \/>').text('Uploading...').appendTo(document.body);\r\n            data.submit();\r\n        },\r\n        done: function (e, data) {\r\n            data.context.text('Upload finished.');\r\n        }\r\n    });\r\n});\r\n<\/pre>\n<h3>2.4 Start Uploads with a button click<\/h3>\n<p>Based on the previous example, it&#8217;s possible to start uploads on the click of a button instead of automatically:<\/p>\n<pre class=\"brush:java\">\r\n$(function () {\r\n    $('#fileupload').fileupload({\r\n        dataType: 'json',\r\n        add: function (e, data) {\r\n            data.context = $('<button \/>').text('Upload')\r\n                .appendTo(document.body)\r\n                .click(function () {\r\n                    data.context = $('<p \/>').text('Uploading...').replaceAll($(this));\r\n                    data.submit();\r\n                });\r\n        },\r\n        done: function (e, data) {\r\n            data.context.text('Upload finished.');\r\n        }\r\n    });\r\n});\r\n<\/pre>\n<h2>3. Requirements<\/h2>\n<h3>3.1 Mandatory Requirements<\/h3>\n<p>\n\u2022&nbsp;jQuery v. 1.6+<br \/>\n\u2022&nbsp;jQuery UI widget factory v. 1.9+ (included)<br \/>\n\u2022&nbsp;jQuery Iframe Transport plugin (included)<\/p>\n<p>The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies from the jQuery UI suite. The jQuery Iframe Transport is required for browsers without XHR file upload support.<\/p>\n<h3>3.2 Optional Requirements<\/h3>\n<p>\n\u2022&nbsp;JavaScript Templates engine v. 2.5.4+<br \/>\n\u2022&nbsp;JavaScript Load Image library v. 1.13.0+<br \/>\n\u2022&nbsp;JavaScript Canvas to Blob polyfill v. 2.1.1+<br \/>\n\u2022&nbsp;blueimp Gallery v. 2.15.1+<br \/>\n\u2022&nbsp;Bootstrap v. 3.2.0+<br \/>\n\u2022&nbsp;Glyphicons<\/p>\n<p>The <strong>JavaScript Templates engine<\/strong> is used to render the selected and uploaded files for the Basic Plus UI and jQuery UI.<\/p>\n<p>The <strong>JavaScript Load Image library<\/strong> and JavaScript Canvas to Blob polyfill are required for the image previews and resizing functionality.<\/p>\n<p>The <strong>blueimp Gallery<\/strong> is used to display the uploaded images in a lightbox.<\/p>\n<p>The user interface of all versions except the jQuery UI version is built with <strong>Bootstrap<\/strong> and icons from <strong>Glyphicons<\/strong>.<\/p>\n<h2>4. Browsers<\/h2>\n<h3>4.1 Desktop Browsers<\/h3>\n<p>The File Upload plugin is regularly tested with the latest browser versions and supports the following minimal versions:<\/p>\n<p>\u2022&nbsp;Google Chrome<br \/>\n\u2022&nbsp;Apple Safari 4.0+<br \/>\n\u2022&nbsp;Mozilla Firefox 3.0+<br \/>\n\u2022&nbsp;Opera 11.0+<br \/>\n\u2022&nbsp;Microsoft Internet Explorer 6.0+<br \/>\n\u2022&nbsp;Microsoft Edge<\/p>\n<h3>4.2 Mobile Browsers<\/h3>\n<p>The File Upload plugin has been tested with and supports the following mobile browsers:<\/p>\n<p>\u2022&nbsp;Apple Safari on iOS 6.0+<br \/>\n\u2022&nbsp;Google Chrome on iOS 6.0+<br \/>\n\u2022&nbsp;Google Chrome on Android 4.0+<br \/>\n\u2022&nbsp;Default Browser on Android 2.3+<br \/>\n\u2022&nbsp;Opera Mobile 12.0+<\/p>\n<h2>5. Conclusion<\/h2>\n<p>To conclude, file upload with jQuery can be easily adapted to your websites using the plugin we presented and its&#8217; features. You can find this plugin on GitHub following the link <a href=\"https:\/\/github.com\/blueimp\/jQuery-File-Upload\" target=\"_blank\">https:\/\/github.com\/blueimp\/jQuery-File-Upload<\/a>. It also has detailed information on the plugin useage and a live demo. However, if you feel that you are searching for something else Kendo UI has another solution for file uploads that you can find <a href=\"http:\/\/demos.telerik.com\/kendo-ui\/upload\/index\" target=\"_blank\">here<\/a>.<\/p>\n<h2>6. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jQuery-File-Upload.zip\"><strong>jQuery File Upload<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The aim of this example is to give you the right knowledge about how you can achieve file upload with jQuery. Notice that this is not an easy task, and plugins are recommended to have non-surprising results. In particular, there is one famous and very used jQuery Plugin for file upload made public to GitHub &hellip;<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-6911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery File Upload Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to give you the right knowledge about how you can achieve file upload with jQuery. Notice that this is not an easy task, and\" \/>\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.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery File Upload Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to give you the right knowledge about how you can achieve file upload with jQuery. Notice that this is not an easy task, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-09T09:15:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:39:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery File Upload Example\",\"datePublished\":\"2015-09-09T09:15:48+00:00\",\"dateModified\":\"2017-12-21T14:39:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/\"},\"wordCount\":1033,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/\",\"name\":\"jQuery File Upload Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-09-09T09:15:48+00:00\",\"dateModified\":\"2017-12-21T14:39:06+00:00\",\"description\":\"The aim of this example is to give you the right knowledge about how you can achieve file upload with jQuery. Notice that this is not an easy task, and\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery File Upload Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery File Upload Example - Web Code Geeks - 2026","description":"The aim of this example is to give you the right knowledge about how you can achieve file upload with jQuery. Notice that this is not an easy task, and","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.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery File Upload Example - Web Code Geeks - 2026","og_description":"The aim of this example is to give you the right knowledge about how you can achieve file upload with jQuery. Notice that this is not an easy task, and","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-09-09T09:15:48+00:00","article_modified_time":"2017-12-21T14:39:06+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery File Upload Example","datePublished":"2015-09-09T09:15:48+00:00","dateModified":"2017-12-21T14:39:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/"},"wordCount":1033,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/","name":"jQuery File Upload Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-09-09T09:15:48+00:00","dateModified":"2017-12-21T14:39:06+00:00","description":"The aim of this example is to give you the right knowledge about how you can achieve file upload with jQuery. Notice that this is not an easy task, and","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-file-upload-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery File Upload Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6911"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6911\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}